Čo je Shadow DOM?

Shadow DOM je webový štandard, ktorý umožňuje inkapsuláciu HTML, CSS a JavaScriptu do samostatných, izolovaných blokov od hlavného dokumentu.

Hlavné koncepty:

• Shadow Host: Element DOM, ku ktorému je pripojený Shadow DOM.
• Shadow Tree: Izolovaný podstrom DOM.
• Shadow Boundary: Hranica medzi Shadow DOM a hlavným dokumentom.
• Shadow Root: Koreňový uzol Shadow Tree. Vytvára sa pomocou element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root je dostupný zvonku cez element.shadowRoot.
  • closed: Shadow Root nie je dostupný zvonku.

Výhody:

• Inkapulácia štýlov: Štýly definované v Shadow DOM nepresakujú von a neovplyvňujú hlavný dokument. Štýly z hlavného dokumentu zvyčajne neovplyvňujú Shadow DOM, ale toto je možné riadiť.
• Inkapulácia DOM: Elementy vo vnútri Shadow DOM nie sú viditeľné v hlavnom DOM strome, čo zabraňuje náhodnému prekrytiu selektorov a manipuláciám.
• Inkapulácia správania: Logika a obslužné rutiny udalostí môžu byť izolované v Shadow DOM.

Príklad vytvorenia Shadow DOM:

// Vytvoríme nový prvok DIV
const hostElement = document.createElement('div');
// Pripojíme Shadow DOM k prvku
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Pridávame obsah do Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Štýl platný iba vo vnútri tohto Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Toto je text vo vnútri Shadow DOM</p>
`;

// Pridávame host-element do hlavného dokumentu
document.body.appendChild(hostElement);

Použitie:

• Vytváranie opakovane použiteľných webových komponentov.
• Izolácia štýlov tretích strán knižníc.
• Ochrana vnútorných detailov komponentu pred vonkajšími zásahmi.

Vlastnosti práce so štýlmi:

• Vonkajšie štýly zvyčajne neovplyvňujú Shadow DOM.
• Môže byť použitá pseudo-trieda :host na štýlovanie samotného Shadow Hostu zvnútra Shadow DOM.
• Môže byť použitá :host-context() na štýlovanie na základe kontextu Shadow Hostu.
• Môže byť použitý pseudo-prvok ::slotted() na štýlovanie prvkov vložených do slotov (<slot>).

<my-component>
  <!-- Tento prvok bude "poslaný" do slotu vo vnútri Shadow DOM -->
  <span>Obsah slotu</span>
</my-component>

// Vo vnútri Shadow DOM komponentu my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Štýl pre prvok vložený do slotu s názvom "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Hlavný obsah komponentu</div>
  <slot></slot> <!-- Tu bude zobrazený obsah slotu -->
`;

Shadow DOM je súčasťou špecifikácie Web Components.