Co je Shadow DOM?

Shadow DOM — je webový standard, který umožňuje inkapsulaci stromu DOM a stylů uvnitř komponenty, čímž je izoluje od zbytku dokumentu.

Hlavní koncepty:

• Shadow tree: Vlastní strom DOM, připojený k elementu.
• Shadow boundary: Hranice oddělující Shadow DOM od hlavního dokumentu.
• Shadow host: Element, ke kterému je Shadow DOM připojen.
• Shadow root: Kořenový uzel Shadow stromu.

Výhody:

• Izolace stylů: Styly definované uvnitř Shadow DOM neovlivňují elementy mimo něj, a naopak.
• Izolace DOM: Struktura DOM uvnitř Shadow DOM není viditelná ani přímo přístupná z hlavního dokumentu, což zabraňuje konfliktům s id a třídami.
• Kapsulace: Vytváří modulární, znovupoužitelné komponenty.

Vytvoření Shadow DOM:

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

shadowRoot.innerHTML = `
  <style>
    /* Styly pouze pro tento Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Toto je obsah Shadow DOM</p>
`;