Wat is Shadow DOM?

Shadow DOM is een webstandaard die het mogelijk maakt HTML, CSS en JavaScript te encapsuleren in aparte, geïsoleerde blokken van het hoofddocument.

Belangrijkste concepten:

• Shadow Host: DOM-element waaraan Shadow DOM wordt gekoppeld.
• Shadow Tree: Geïsoleerde DOM-boom.
• Shadow Boundary: Grens tussen Shadow DOM en het hoofddocument.
• Shadow Root: Wortelknooppunt van de Shadow Tree. Gemaakt met element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root is van buitenaf toegankelijk via element.shadowRoot.
  • closed: Shadow Root is niet toegankelijk van buitenaf.

Voordelen:

• Stijl-encapsulatie: Stijlen gedefinieerd in Shadow DOM lekken niet naar buiten en beïnvloeden het hoofddocument niet. Stijlen van het hoofddocument beïnvloeden standaard het Shadow DOM niet, maar dit kan worden gecontroleerd.
• DOM-encapsulatie: Elementen binnen Shadow DOM zijn niet zichtbaar in de hoofd-DOM-structuur, wat per ongeluk overlappende selectors en manipulaties voorkomt.
• Gedrags-encapsulatie: Logica en event handlers kunnen geïsoleerd worden binnen Shadow DOM.

Voorbeeld van het maken van Shadow DOM:

// Maak een nieuw DIV-element
const hostElement = document.createElement('div');
// Voeg Shadow DOM toe aan het element
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Voeg inhoud toe aan Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Stijl die alleen binnen dit Shadow DOM geldt */
    p {
      color: blue;
    }
  </style>
  <p>Dit is tekst binnen Shadow DOM</p>
`;

// Voeg het host-element toe aan het hoofddocument
document.body.appendChild(hostElement);

Toepassingen:

• Herbruikbare webcomponenten maken.
• Stijlisolatie van externe bibliotheken.
• Interne details van de component beschermen tegen externe interventies.

Eigenschappen bij werken met stijlen:

• Externe stijlen beïnvloeden standaard niet het Shadow DOM.
• :host pseudo-klasse kan worden gebruikt om de Shadow Host te stylen vanuit Shadow DOM.
• :host-context() kan worden gebruikt om te stylen op basis van de context van de Shadow Host.
• ::slotted() pseudo-element kan worden gebruikt om elementen te stylen die in slots (<slot>) geplaatst zijn.

<my-component>
  <!-- Dit element wordt "gestuurd" naar de slot binnen Shadow DOM -->
  <span>Slot-inhoud</span>
</my-component>

// Binnen Shadow DOM van my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Stijl voor element geplaatst in slot met naam "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Hoofdinformatie van het component</div>
  <slot></slot> <!-- Hier wordt de slot-inhoud weergegeven -->
`;

Shadow DOM maakt deel uit van de Web Components-specificatie.