Co je Shadow DOM?

Shadow DOM je webový standard, který umožňuje inkapsulaci HTML, CSS a JavaScriptu do samostatných, izolovaných bloků od hlavního dokumentu.

Hlavní koncepty:

• Shadow Host: Element DOM, ke kterému je připojen Shadow DOM.
• Shadow Tree: Izolovaný podstrom DOM.
• Shadow Boundary: Hranice mezi Shadow DOM a hlavním dokumentem.
• Shadow Root: Kořenový uzel Shadow Tree. Vytváří se pomocí element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root je přístupný zvenčí přes element.shadowRoot.
  • closed: Shadow Root není přístupný zvenčí.

Výhody:

• Inkapulace stylů: Styly definované v Shadow DOM neprosakují ven a neovlivňují hlavní dokument. Styly z hlavního dokumentu obvykle na Shadow DOM neovlivňují, ale toto lze řídit.
• Inkapulace DOM: Elementy uvnitř Shadow DOM nejsou viditelné v hlavním DOM stromu, což zabraňuje náhodnému překrývání selektorů a manipulacím.
• Inkapulace chování: Logika a obslužné rutiny událostí mohou být izolovány v Shadow DOM.

Příklad vytvoření Shadow DOM:

// Vytvoříme nový element DIV
const hostElement = document.createElement('div');
// Připojujeme Shadow DOM k elementu
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Přidáváme obsah do Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Styl aplikovatelný pouze uvnitř tohoto Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Toto je text uvnitř Shadow DOM</p>
`;

// Přidáváme host-element do hlavního dokumentu
document.body.appendChild(hostElement);

Použití:

• Vytváření znovupoužitelných webových komponent.
• Izolace stylů třetích stran knihoven.
• Ochrana vnitřních detailů komponenty před vnějšími zásahy.

Vlastnosti práce se styly:

• Vnější styly obvykle neovlivňují Shadow DOM.
• Může být použit :host pseudo-třída pro stylování samotného Shadow Hostu zevnitř Shadow DOM.
• Může být použit :host-context() pro stylování na základě kontextu Shadow Hostu.
• Může být použit ::slotted() pseudo-prvek pro stylování elementů vložených do slotů (<slot>).

<my-component>
  <!-- Tento element bude "odeslán" do slotu uvnitř Shadow DOM -->
  <span>Obsah slotu</span>
</my-component>

// Uvnitř Shadow DOM komponenty my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Styl pro element vložený do slotu s názvem "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Hlavní obsah komponenty</div>
  <slot></slot> <!-- Zde bude zobrazen obsah slotu -->
`;

Shadow DOM je součástí specifikace Web Components.