Kas ir Shadow DOM?

Shadow DOM — ir tīmekļa standarts, kas ļauj inkapsulēt DOM koku un stilus komponenta iekšienē, izolējot tos no pārējā dokumenta.

Galvenās koncepcijas:

• Shadow tree: Pašreizējais DOM koks, pievienots elementam.
• Shadow boundary: Robeža, kas atdala Shadow DOM no galvenā dokumenta.
• Shadow host: Elements, pie kura ir pievienots Shadow DOM.
• Shadow root: Shadow koka saknes mezgls.

Priekšrocības:

• Stilu izolācija: Stili, kas definēti Shadow DOM iekšienē, neietekmē ārējos elementus, un otrādi.
• DOM izolācija: DOM struktūra Shadow DOM iekšienē nav redzama un nav tieši pieejama no galvenā dokumenta, tas novērš ID un klases konfliktus.
• Kapsulācija: veido modulāras, atkārtoti lietojamas komponentes.

Shadow DOM izveide:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // režīms: 'open' - pieejams ar JavaScript; 'closed' - nē

shadowRoot.innerHTML = `
  <style>
    /* Šī Shadow DOM stili */
    p {
      color: blue;
    }
  </style>
  <p>Šis ir Shadow DOM saturs</p>
`;