Was ist Shadow DOM?

Shadow DOM — ist ein Web-Standard, der es ermöglicht, den DOM-Baum und die Stile innerhalb einer Komponente zu kapseln und vom Rest des Dokuments zu isolieren.

Hauptkonzepte:

• Shadow tree: Eigenständiger DOM-Baum, an ein Element angehängt.
• Shadow boundary: Grenze, die den Shadow DOM vom Hauptdokument trennt.
• Shadow host: Element, an das der Shadow DOM angehängt ist.
• Shadow root: Wurzelknoten des Shadow tree.

Vorteile:

• Stilisolierung: Stile, die innerhalb des Shadow DOM definiert sind, beeinflussen keine Elemente außerhalb davon, und umgekehrt.
• DOM-Isolierung: Die DOM-Struktur innerhalb des Shadow DOM ist nicht sichtbar und nicht direkt vom Hauptdokument zugänglich, was Konflikte bei IDs und Klassen verhindert.
• Kapselung: Erstellt modulare, wiederverwendbare Komponenten.

Erstellung des Shadow DOM:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // Modus: 'open' - zugänglich via JavaScript; 'closed' - nicht

shadowRoot.innerHTML = `
  <style>
    /* Stile nur für dieses Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Dies ist der Inhalt des Shadow DOM</p>
`;