Czym jest Shadow DOM?

Shadow DOM — to standard sieciowy, który umożliwia enkapsulację drzewa DOM i stylów wewnątrz komponentu, izolując je od reszty dokumentu.

Główne koncepcje:

• Shadow tree: własne drzewo DOM, podłączone do elementu.
• Shadow boundary: granica oddzielająca Shadow DOM od głównego dokumentu.
• Shadow host: element, do którego dołączony jest Shadow DOM.
• Shadow root: węzeł korzenia Shadow tree.

Zalety:

• Izolacja stylów: style zdefiniowane wewnątrz Shadow DOM nie wpływają na elementy spoza niego, i odwrotnie.
• Izolacja DOM: struktura DOM wewnątrz Shadow DOM nie jest widoczna ani dostępna bezpośrednio z głównego dokumentu, co zapobiega konfliktom id i klas.
• Kapsułkowanie: tworzy modułowe, wielokrotnego użytku komponenty.

Tworzenie Shadow DOM:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // tryb: 'open' - dostępny z JavaScript; 'closed' - nie

shadowRoot.innerHTML = `
  <style>
    /* Style tylko dla tego Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>To jest zawartość Shadow DOM</p>
`;