Kas yra Shadow DOM?

Shadow DOM - tai interneto standartas, leidžiantis inkapsuliuoti DOM ir CSS komponento viduje. Jis sukuria atskirą, izoliuotą DOM medį, vadinamą "šešėlio medžiu" (shadow tree), kuris yra pritvirtintas prie pagrindinio dokumento elemento, vadinamo "šešėlio šaknimi" (shadow root).

Shadow DOM privalumai:

• CSS izoliacija: Shadow DOM viduje apibrėžti stiliai ne "patenka" į išorę, netrukdo pagrindiniam dokumentui, ir atvirkščiai, pagrindinio dokumento stiliai paprastai neveikia Shadow DOM.
• DOM izoliacija: Shadow DOM struktūra yra paslėpta nuo pagrindinio dokumento ir nėra pasiekiama standartiniais pasirinkimo metodais (pvz., querySelector).
• JavaScript izoliacija: Skriptai, vykdomi pagrindiniame dokumente, lengvai neprieina prie Shadow DOM elementų.
• Pakartotinis naudojimas: Shadow DOM komponentai gali būti lengvai naudojami kituose programos ar net kitose svetainėse.

Shadow DOM kūrimas:

// Gauname elementą, prie kurio norime pritvirtinti Shadow DOM
const hostElement = document.getElementById('my-component');

// Sukuriame Shadow Root
// 'open' daro Shadow DOM prieinamą išorėje per hostElement.shadowRoot
// 'closed' slepia Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Pridedame elementus į Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Šio komponento stiliai */
    h2 {
      color: blue;
    }
  </style>
  <h2>Komponento vidinis antraštė</h2>
  <p>Komponento vidinis paragrafas.</p>
`;

Savybės:

• Slotai (Slots): leidžia įterpti išorinį turinį į tam tikras vietas Shadow DOM viduje
• Shadow Parts: leidžia stilizuoti tam tikrus elementus Shadow DOM viduje iš išorės

Shadow DOM yra svarbi interneto komponentų kūrimo dalis, užtikrinanti stiprią inkapsuliaciją, reikalingą pakartotinai naudojamiems ir savarankiškiems UI elementams kurti.