Shadow DOM чист?

Shadow DOM стандартиест, ки имкон медиҳад, ки HTML, CSS ва JavaScript дар блокҳои алоҳида ва изолированӣ аз ҳуҷҷати асосӣ инкапсулатсия карда шаванд.

Концептҳои асосӣ:

• Shadow Host: Элемент DOM, ки ба он Shadow DOM пайваст карда мешавад.
• Shadow Tree: Дарахти DOM-и изолатсияшуда.
• Shadow Boundary: Маҳдудият байни Shadow DOM ва ҳуҷҷати асосӣ.
• Shadow Root: Гузаргоҳи асосии Shadow Tree. Бо истифода аз element.attachShadow({ mode: 'open' | 'closed' }) сохта мешавад:
  • open: Shadow Root дар берун тавассути element.shadowRoot дастрас аст.
  • closed: Shadow Root дар берун дастрас нест.

Фоидаҳо:

• Инкапсулятсияи услубҳо: Услубҳое, ки дар Shadow DOM муайян шудаанд, ба берун намерасанд ва ба ҳуҷҷати асосӣ таъсир намерасонанд. Услубҳо аз ҳуҷҷати асосӣ одатан ба Shadow DOM таъсир намерасонанд, аммо инро метавон назорат кард.
• Инкапсулятсияи DOM: Элементҳо дар Shadow DOM дар дарахти DOM-и асосӣ намебинанд, ки пешгирӣ мекунад аз сӯроҳии тасодуфӣ ва тағирот.
• Инкапсулятсияи рафтор: Логика ва коркардкунандагони ҳодисаҳо метавонанд дар Shadow DOM изолатсия карда шаванд.

Масалан барои сохтани Shadow DOM:

// Эҷод кардани элементи нав
const hostElement = document.createElement('div');
// Пайваст кардани Shadow DOM ба он
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Илова кардани мундариҷа ба Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Услуб, ки танҳо дар дохили Shadow DOM истифода мешавад */
    p {
      color: blue;
    }
  </style>
  <p>Ин матн дар дохили Shadow DOM аст</p>
`;

// Илова кардани ҳост-элемент ба ҳуҷҷати асосӣ
document.body.appendChild(hostElement);

Истифода:

• Эҷоди компонентҳои веби такроршаванда.
• Инкапсулятсияи услубҳои китобхонаҳои тарафи сеюм.
• Ҳифзи тафсилоти дохилии компонент аз дахолати беруна.

Хусусиятҳои кор бо услубҳо:

• Услубҳои беруна одатан ба Shadow DOM таъсир намерасонанд.
• Мумкин аст, ки :host псевдо-класс барои услуби ҳост-элемент дар дохили Shadow DOM истифода шавад.
• Мумкин аст, ки :host-context() барои услуби асосӣ дар асоси контексти ҳост-элемент истифода шавад.
• Мумкин аст, ки ::slotted() псевдо-элемент барои услуби элементҳое, ки ба слотҳо (<slot>) гузошта шудаанд, истифода шавад.

<my-component>
  <!-- Ин элемент ба слот дар Shadow DOM интиқол дода мешавад -->
  <span>Мундариҷаи слот</span>
</my-component>

// Дар дохили Shadow DOM-и компонент `my-component`
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Услуб барои элемент, гузошташуда дар слот бо номи "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Мундариҷаи асосии компонент</div>
  <slot></slot> <!-- Ин ҷо мундариҷаи слот намоиш дода мешавад -->
`;

Shadow DOM қисми шикасти Web Components мебошад.