Mis on Shadow DOM?

Shadow DOM on veebistandard, mis võimaldab inkapsuleerida DOM-i ja CSS-i komponendi sees. See loob eraldi, isoleeritud DOM-puu, mida nimetatakse "varjupuu" (shadow tree), mis on ühendatud põhidokumendi elemendiga, mida nimetatakse "varjupuu juureks" (shadow root).

Shadow DOM eelised:

• CSS-i isolatsioon: Shadow DOM-i sees määratletud stiile ei "levi" välja, mõjutades põhidokumenti, ja vastupidi, põhidokumendi stiilid tavaliselt Shadow DOM-i ei mõjuta.
• DOM-i isolatsioon: Shadow DOM-i struktuur on varjatud põhidokumendist ega ole saadaval standardsete valikumeetoditega (näiteks querySelector).
• JavaScript-i isolatsioon: Skriptid, mis töötavad põhidokumendis, ei pääse lihtsalt Shadow DOM-i elementidele ligi.
• Taaskasutus: Shadow DOM-iga loodud komponendid saab hõlpsasti kasutada teistes osades või isegi teistel veebilehtedel.

Shadow DOM loomine:

// Saame elemendi, millele soovime Shadow DOM-i lisada
const hostElement = document.getElementById('my-component');

// Loome Shadow Root
// 'open' muudab Shadow DOM-i väljastpoolt kättesaadavaks hostElement.shadowRoot kaudu
// 'closed' peidab Shadow DOM-i
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Lisame elemendid Shadow DOM-i
shadowRoot.innerHTML = `
  <style>
    /* Selle komponendi stiilid */
    h2 {
      color: blue;
    }
  </style>
  <h2>Komponendi sisemine pealkiri</h2>
  <p>Komponendi sisemine lõik.</p>
`;

Omadused:

• Slaidid (Slots): võimaldavad sisestada välise sisu teatud kohtadesse Shadow DOM-i sees
• Shadow Parts: võimaldavad stiilida teatud elemente Shadow DOM-i sees väljastpoolt

Shadow DOM on oluline komponentide loomisel veebikomponentide (Web Components) jaoks, pakkudes tugevat inkapsulatsiooni, mis on vajalik korduvkasutatavate ja iseseisvate UI-elementide loomiseks.