Was ist ein Shadow DOM?

Der Shadow DOM ist eine Webstandard-Technologie, mit der Entwickler abgeschlossene, eigene Teile im DOM-Baum einer Webseite („Document Object Model“) erstellen können. Komponenten mit Shadow DOM enthalten ihren eigenen, von außen nicht direkt beeinflussbaren HTML-Bereich samt CSS und Skripten.

Mit Shadow DOM lassen sich wiederverwendbare und kapselbare Web Components erstellen, deren Layout und Verhalten unabhängig vom Rest der Seite sind. Z. B. Widgets, Buttons oder komplexe UI-Bausteine.

Vorteil: Styles und Funktionen innerhalb des Shadow DOM beeinflussen nicht unbeabsichtigt andere Seitenelemente, und externe Styles haben keinen Einfluss auf die geschützten Komponenten.

Standardmäßig wird Shadow DOM z. B. in modernen Browsern und in Frameworks wie Angular, React oder Vue (teilweise) unterstützt.