Wat is Shadow DOM?

Shadow DOM — is een webstandaard die het mogelijk maakt om de DOM-boom en stijlen binnen een component te encapsuleren en te isoleren van de rest van het document.

Belangrijkste concepten:

• Shadow tree: Eigen DOM-boom, gekoppeld aan een element.
• Shadow boundary: Grens die de Shadow DOM scheidt van het hoofddocument.
• Shadow host: Element waaraan de Shadow DOM is gekoppeld.
• Shadow root: Root-knoop van de Shadow tree.

Voordelen:

• Stijlisolatie: Stijlen die binnen de Shadow DOM zijn gedefinieerd, beïnvloeden geen elementen buiten de Shadow DOM, en vice versa.
• DOM-isolatie: De DOM-structuur binnen de Shadow DOM is niet zichtbaar en niet direct toegankelijk vanuit het hoofddocument, wat conflicten met id's en klassen voorkomt.
• Encapsulatie: Creëert modulaire, herbruikbare componenten.

Creëren van Shadow DOM:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // modus: 'open' - toegankelijk via JavaScript; 'closed' - niet

shadowRoot.innerHTML = `
  <style>
    /* Stijlen alleen voor deze Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Dit is de inhoud van de Shadow DOM</p>
`;