Čo je Shadow DOM?

Shadow DOM — je štandard weba koji omogućuje inkapsuláciu DOM stromu a štýlov vnútri komponentu, čím ich izoluje od zvyšku dokumentu.

Hlavné koncepty:

• Shadow tree: Vlastný DOM strom, pripojený k prvku.
• Shadow boundary: Hranica, ktorá oddeľuje Shadow DOM od hlavného dokumentu.
• Shadow host: Prvok, ku ktorému je pripojený Shadow DOM.
• Shadow root: Koreňový uzol Shadow stromu.

Výhody:

• Izolácia štýlov: Štýly definované vo vnútri Shadow DOM neovplyvňujú prvky mimo neho, a naopak.
• Izolácia DOM: Štruktúra DOM vo vnútri Shadow DOM nie je viditeľná a nie je priamo dostupná z hlavného dokumentu, čím sa zabraňuje konfliktom s id a triedami.
• Kapsulácia: Vytvára modulárne, znovupoužiteľné komponenty.

Vytvorenie Shadow DOM:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // režim: 'open' - prístupný cez JavaScript; 'closed' - nie

shadowRoot.innerHTML = `
  <style>
    /* Štýly len pre tento Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Toto je obsah Shadow DOM</p>
`;