Kas yra Shadow DOM?

Shadow DOM yra interneto standartas, leidžiantis inkapsuliuoti HTML, CSS ir JavaScript atskiruose, izoliuotuose blokuose nuo pagrindinio dokumento.

Pagrindinės sąvokos:

• Shadow Host: DOM elementas, prie kurio pridedamas Shadow DOM.
• Shadow Tree: Izoliuotas DOM medžio šakos.
• Shadow Boundary: Riba tarp Shadow DOM ir pagrindinio dokumento.
• Shadow Root: Shadow Tree šakos šaknis, sukuriama naudojant element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root yra prieinama iš išorės per element.shadowRoot.
  • closed: Shadow Root nėra prieinama iš išorės.

Privalumai:

• Stilių inkapsuliacija: Shadow DOM apibrėžti stiliai neprasiskverbia į išorę ir neveikia pagrindinio dokumento. Pagrindinio dokumento stiliai dažniausiai neveikia Shadow DOM, tačiau tai galima kontroliuoti.
• DOM inkapsuliacija: Elementai Shadow DOM viduje nematomi pagrindiniame DOM medyje, kas užkerta kelią atsitiktiniam selektorių susikirtimui ir manipuliacijoms.
• Elgsenos inkapsuliacija: Logika ir įvykių tvarkyklės gali būti izoliuotos Shadow DOM.

Pavyzdys:

// Sukuriame naują DIV elementą
const hostElement = document.createElement('div');
// Pridedame Shadow DOM prie elemento
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Pridedame turinį į Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Stilius, taikomas tik šiame Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Tai tekstas Shadow DOM viduje</p>
`;

// Pridedame host elementą į pagrindinį dokumentą
document.body.appendChild(hostElement);

Naudojimas:

• Kartotinai naudojamų interneto komponentų kūrimas.
• Trečiųjų šalių bibliotekų stilių izoliacija.
• Vidinių komponento detalių apsauga nuo išorinių įsikišimų.

Stilių darbo ypatumai:

• Išoriniai stiliai paprastai neveikia Shadow DOM.
• Gali būti naudojama pseudo-klasė :host stiliuoti patį Shadow Host iš vidaus.
• Gali būti naudojama :host-context() stiliuoti pagal kontekstą.
• Gali būti naudojamas pseudo-elementas ::slotted() stiliuoti elementus, įdėtus į slotus (<slot>).

<my-component>
  <!-- Šis elementas bus "siųstas" į Shadow DOM slotą -->
  <span>Slot turinys</span>
</my-component>

// Shadow DOM viduje my-component komponento
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Stilius elementui, įdėtą į slotą su pavadinimu "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Pagrindinis komponento turinys</div>
  <slot></slot> <!-- Čia bus rodomas sloto turinys -->
`;

Shadow DOM yra Web Components specifikacijos dalis.