Kas ir Shadow DOM?

Shadow DOM ir veb standarts, kas ļauj inkapsulēt DOM un CSS komponenta iekšienē. Tas izveido atsevišķu, izolētu DOM koku, ko sauc par "ēnas koku" (shadow tree), kas ir piestiprināts pie galvenā dokumenta elementa, ko sauc par "ēnas sakni" (shadow root).

Shadow DOM priekšrocības:

• CSS izolācija: Shadow DOM iekšienē definētie stili ne "plūst" ārā, neietekmē galveno dokumentu, un otrādi, galvenā dokumenta stili parasti neietekmē Shadow DOM.
• DOM izolācija: Shadow DOM struktūra ir slēpta no galvenā dokumenta un nav pieejama standarta izvēles metodēm (piemēram, querySelector).
• JavaScript izolācija: Skripti, kas tiek izpildīti galvenajā dokumentā, viegli nevar piekļūt Shadow DOM elementiem.
• Atkārtota izmantošana: Shadow DOM komponenti var viegli tikt izmantoti citās daļās vai pat citās tīmekļa vietnēs.

Shadow DOM izveide:

// Saņemam elementu, pie kura vēlamies pievienot Shadow DOM
const hostElement = document.getElementById('my-component');

// Izveidojam Shadow Root
// 'open' padara Shadow DOM pieejamu ārpusē caur hostElement.shadowRoot
// 'closed' slēpj Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Pievienojam elementus Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Šī komponenta stili */
    h2 {
      color: blue;
    }
  </style>
  <h2>Komponenta iekšējais virsraksts</h2>
  <p>Komponenta iekšējais paragrāfs.</p>
`;

Īpašības:

• Slotu (Slots): ļauj ievietot ārējo saturu noteiktās vietās Shadow DOM iekšienē
• Shadow Parts: ļauj stilizēt noteiktus elementus Shadow DOM iekšienē no ārpuses

Shadow DOM ir būtiska sastāvdaļa web komponentu izveidē, nodrošinot spēcīgu inkapsulāciju, kas nepieciešama atkārtoti izmantojamām un pašpietiekamām UI elementiem.