Czym jest Shadow DOM?

Shadow DOM to standard internetowy, który pozwala na enkapsulację DOM i CSS wewnątrz komponentu. Tworzy oddzielne, izolowane drzewo DOM, zwane "drzewem cienia" (shadow tree), które jest dołączane do elementu w głównym dokumencie, zwanego "korzeniem cienia" (shadow root).

Zalety Shadow DOM:

• Izolacja CSS: Style zdefiniowane wewnątrz Shadow DOM nie "uciekają" na zewnątrz, nie wpływając na główny dokument, a domyślnie style z głównego dokumentu nie wpływają na Shadow DOM.
• Izolacja DOM: Struktura Shadow DOM jest ukryta przed głównym dokumentem i nie jest dostępna przez standardowe metody wyboru (np. querySelector).
• Izolacja JavaScript: Skrypty działające w głównym dokumencie nie mogą łatwo uzyskać dostępu do elementów wewnątrz Shadow DOM.
• Ponowne użycie: Komponenty utworzone z Shadow DOM mogą być łatwo używane w innych częściach aplikacji lub nawet na innych stronach internetowych.

Tworzenie Shadow DOM:

// Pobieramy element, do którego chcemy dołączyć Shadow DOM
const hostElement = document.getElementById('my-component');

// Tworzymy Shadow Root
// 'open' sprawia, że Shadow DOM jest dostępny z zewnątrz przez hostElement.shadowRoot
// 'closed' ukrywa Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Dodajemy elementy do Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Style specyficzne dla tego komponentu */
    h2 {
      color: blue;
    }
  </style>
  <h2>Nagłówek wewnątrz komponentu</h2>
  <p>Paragraf wewnątrz komponentu.</p>
`;

Cechy:

• Sloty: Pozwalają na wstawianie zewnętrznej zawartości w określonych miejscach wewnątrz Shadow DOM.
• Shadow Parts: Pozwalają na stylizację określonych elementów wewnątrz Shadow DOM z zewnątrz.

Shadow DOM jest kluczowym elementem do tworzenia web components (Web Components), zapewniając silną enkapsulację, niezbędną do tworzenia wielokrotnego użytku i samodzielnych elementów UI.