Was ist Shadow DOM?

Shadow DOM ist ein Web-Standard, der die Kapselung von DOM und CSS innerhalb einer Komponente ermöglicht. Es erstellt einen separaten, isolierten DOM-Baum, genannt "Schattenbaum" (shadow tree), der an ein Element im Hauptdokument angehängt wird, genannt "Schattenwurzel" (shadow root).

Vorteile des Shadow DOM:

• CSS-Isolierung: Innerhalb des Shadow DOM definierte Stile "entlaufen" nicht nach außen und beeinflussen das Hauptdokument, und standardmäßig beeinflussen Stile aus dem Hauptdokument das Shadow DOM nicht.
• DOM-Isolierung: Die Struktur des Shadow DOM ist vor dem Hauptdokument verborgen und über Standard-Auswahlmethoden (z.B. querySelector) nicht zugänglich.
• JavaScript-Isolierung: Skripte, die im Hauptdokument ausgeführt werden, können nicht leicht auf Elemente innerhalb des Shadow DOM zugreifen.
• Wiederverwendung: Mit Shadow DOM erstellte Komponenten können leicht in anderen Teilen der Anwendung oder sogar auf anderen Websites verwendet werden.

Erstellung des Shadow DOM:

// Das Element erhalten, an das das Shadow DOM angehängt werden soll
const hostElement = document.getElementById('my-component');

// Shadow Root erstellen
// 'open' macht das Shadow DOM von außen über hostElement.shadowRoot zugänglich
// 'closed' verbirgt das Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Elemente innerhalb des Shadow DOM hinzufügen
shadowRoot.innerHTML = `
  <style>
    /* Spezifische Stile für diese Komponente */
    h2 {
      color: blue;
    }
  </style>
  <h2>Überschrift innerhalb der Komponente</h2>
  <p>Absatz innerhalb der Komponente.</p>
`;

Merkmale:

• Slots: Ermöglichen das Einfügen von externem Inhalt an bestimmten Stellen innerhalb des Shadow DOM.
• Shadow Parts: Ermöglichen es, bestimmte Elemente innerhalb des Shadow DOM von außen zu stylen.

Das Shadow DOM ist eine Schlüsselkomponente für die Erstellung von Web-Komponenten (Web Components), die eine starke Kapselung bietet, die notwendig ist, um wiederverwendbare und eigenständige UI-Elemente zu erstellen.