Wat is Shadow DOM?

Shadow DOM is een webstandaard die het mogelijk maakt om DOM en CSS te encapsuleren binnen een component. Het creëert een aparte, geïsoleerde DOM-boom, genaamd "schaduwboom" (shadow tree), die wordt gekoppeld aan een element in het hoofddocument, genaamd "schaduwroot" (shadow root).

Voordelen van Shadow DOM:

• CSS-isolatie: Stijlen die binnen Shadow DOM zijn gedefinieerd, "lekken" niet naar buiten toe, waardoor het hoofddocument niet wordt beïnvloed, en standaard beïnvloeden stijlen uit het hoofddocument Shadow DOM niet.
• DOM-isolatie: De structuur van Shadow DOM is verborgen voor het hoofddocument en niet toegankelijk via standaard selectiemethoden (bijvoorbeeld querySelector).
• JavaScript-isolatie: Scripts die in het hoofddocument worden uitgevoerd, kunnen niet gemakkelijk toegang krijgen tot de elementen binnen Shadow DOM.
• Herbruikbaarheid: Componenten gemaakt met Shadow DOM kunnen gemakkelijk worden gebruikt in andere delen van de applicatie of zelfs op andere websites.

Creëren van Shadow DOM:

// Het element krijgen waaraan je Shadow DOM wilt toevoegen
const hostElement = document.getElementById('my-component');

// Shadow Root maken
// 'open' maakt Shadow DOM toegankelijk van buitenaf via hostElement.shadowRoot
// 'closed' verbergt Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Elementen toevoegen binnen Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Stijlen specifiek voor deze component */
    h2 {
      color: blue;
    }
  </style>
  <h2>Titel binnen de component</h2>
  <p>Paragraaf binnen de component.</p>
`;

Kenmerken:

• Slots: Stellen het inbrengen van externe inhoud op specifieke plaatsen binnen Shadow DOM mogelijk.
• Shadow Parts: Stellen het stylen van bepaalde elementen binnen Shadow DOM mogelijk van buitenaf.

Shadow DOM is een belangrijke component voor het maken van webcomponenten (Web Components), die een sterke encapsulatie bieden, noodzakelijk voor het maken van herbruikbare en zelfvoorzienende UI-elementen.