Co je Shadow DOM?

Shadow DOM je webový standard, který umožňuje enkapsulaci DOM a CSS uvnitř komponenty. Vytváří samostatné, izolované stromové DOM, nazývané "stínový strom" (shadow tree), který je připojen k elementu v hlavním dokumentu, nazývanému "stínový kořen" (shadow root).

Výhody Shadow DOM:

• Izolace CSS: Styly definované uvnitř Shadow DOM "neunikají" ven, neovlivňují hlavní dokument, a ve výchozím nastavení styly z hlavního dokumentu na Shadow DOM neplatí.
• Izolace DOM: Struktura Shadow DOM je skryta před hlavním dokumentem a není přístupná přes standardní metody výběru (například querySelector).
• Izolace JavaScript: Skripty běžící v hlavním dokumentu nemohou snadno získat přístup k prvkům uvnitř Shadow DOM.
• Opakované použití: Komponenty vytvořené s Shadow DOM lze snadno použít v jiných částech aplikace nebo dokonce na jiných webových stránkách.

Vytvoření Shadow DOM:

// Získáme prvek, ke kterému chceme připojit Shadow DOM
const hostElement = document.getElementById('my-component');

// Vytvoříme Shadow Root
// 'open' umožňuje přístup k Shadow DOM zvenčí přes hostElement.shadowRoot
// 'closed' skrývá Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Přidáme prvky do Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Styly specifické pro tento komponent */
    h2 {
      color: blue;
    }
  </style>
  <h2>Nadpis uvnitř komponenty</h2>
  <p>Odstavec uvnitř komponenty.</p>
`;

Vlastnosti:

• Sloty: Umožňují vkládání externího obsahu na specifická místa uvnitř Shadow DOM.
• Shadow Parts: Umožňují stylizovat určité prvky uvnitř Shadow DOM zvenčí.

Shadow DOM je klíčovou součástí pro tvorbu webových komponent (Web Components), poskytující silnou inkapsulaci, která je nezbytná pro tvorbu znovu použitelných a samostatných UI prvků.