Kas yra Shadow DOM?

Shadow DOM — tai interneto standartas, leidžiantis inkapsuliuoti DOM medį ir stilius komponento viduje, izoliuojant juos nuo likusios dokumento dalies.

Pagrindinės sąvokos:

• Shadow tree: savas DOM medis, pririštas prie elemento.
• Shadow boundary: riba, skirianti Shadow DOM nuo pagrindinio dokumento.
• Shadow host: elementas, prie kurio pririštas Shadow DOM.
• Shadow root: Shadow medžio šakninis mazgas.

Privalumai:

• Stilių izoliacija: Stiliai, apibrėžti Shadow DOM viduje, neveikia išorinių elementų ir atvirkščiai.
• DOM izoliacija: DOM struktūra Shadow DOM viduje nėra matoma ir nėra tiesiogiai pasiekiama iš pagrindinio dokumento, tai išvengia ID ir klasių konfliktų.
• Kapsuliacija: kuria modulius, daugkartinius komponentus.

Shadow DOM kūrimas:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // režimas: 'open' - prieinama per JavaScript; 'closed' - ne

shadowRoot.innerHTML = `
  <style>
    /* Tik šiam Shadow DOM stiliai */
    p {
      color: blue;
    }
  </style>
  <p>Tai yra Shadow DOM turinys</p>
`;