Czym jest Shadow DOM?

Shadow DOM to standard sieciowy, który umożliwia enkapsulację HTML, CSS i JavaScript w oddzielnych, izolowanych blokach od głównego dokumentu.

Główne koncepcje:

• Shadow Host: Element DOM, do którego dołączany jest Shadow DOM.
• Shadow Tree: Izolowane drzewo DOM.
• Shadow Boundary: Granica między Shadow DOM a głównym dokumentem.
• Shadow Root: Węzeł korzenia Shadow Tree. Tworzony za pomocą element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root dostępny z zewnątrz przez element.shadowRoot.
  • closed: Shadow Root niedostępny z zewnątrz.

Zalety:

• Enkapsulacja stylów: Style zdefiniowane w Shadow DOM nie przenikają na zewnątrz i nie wpływają na główny dokument. Style z głównego dokumentu domyślnie nie wpływają na Shadow DOM, ale można to kontrolować.
• Enkapsulacja DOM: Elementy wewnątrz Shadow DOM nie są widoczne w głównym drzewie DOM, co zapobiega przypadkowym kolizjom selektorów i manipulacji.
• Enkapsulacja zachowania: Logika i obsługa zdarzeń mogą być izolowane w Shadow DOM.

Przykład tworzenia Shadow DOM:

// Tworzymy nowy element DIV
const hostElement = document.createElement('div');
// Dołączamy Shadow DOM do elementu
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Dodajemy zawartość do Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Styl dostępny tylko wewnątrz tego Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>To jest tekst wewnątrz Shadow DOM</p>
`;

// Dodajemy element host do głównego dokumentu
document.body.appendChild(hostElement);

Zastosowania:

• Tworzenie wielokrotnego użytku komponentów webowych.
• Izolacja stylów bibliotek zewnętrznych.
• Ochrona wewnętrznych szczegółów komponentu przed ingerencją z zewnątrz.

Cechy pracy ze stylami:

• Style zewnętrzne domyślnie nie wpływają na Shadow DOM.
• Można użyć :host do stylizacji Shadow Host z wnętrza Shadow DOM.
• Można użyć :host-context() do stylizacji na podstawie kontekstu Shadow Host.
• Można użyć pseudo-elementu ::slotted() do stylizacji elementów umieszczonych w slotach (<slot>).

<my-component>
  <!-- Ten element zostanie "wysłany" do slotu wewnątrz Shadow DOM -->
  <span>Zawartość slotu</span>
</my-component>

// Wewnątrz Shadow DOM komponentu my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Styl dla elementu umieszczonego w slocie o nazwie "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Główna zawartość komponentu</div>
  <slot></slot> <!-- Tu będzie wyświetlana zawartość slotu -->
`;

Shadow DOM jest częścią specyfikacji Web Components.