Was ist der Unterschied zwischen Shadow DOM, Virtual DOM und normalem DOM?

DOM (Document Object Model) ist eine API für HTML- und XML-Dokumente. Es stellt einen Knotenbaum dar, bei dem jeder Knoten einem Element, Attribut oder Textfragment des Dokuments entspricht. Es wird verwendet, um auf die Struktur, Stile und Inhalte von Webseiten zuzugreifen und diese zu manipulieren. Direkte Manipulationen am DOM können langsam sein, da sie eine Neuberechnung von Stilen, Layout und Neuzeichnung erfordern.

Virtual DOM ist ein Konzept, das in Frameworks wie React oder Vue verwendet wird. Es ist eine Darstellung des DOM-Baums, die im Speicher gehalten wird. Wenn sich die Daten einer Komponente ändern, erstellt das Framework einen neuen virtuellen DOM-Baum. Dieser wird dann mit dem vorherigen virtuellen Baum verglichen (Diffing), um die minimalen Änderungen zu ermitteln, die am echten DOM vorgenommen werden müssen. Dies optimiert die Aktualisierung der Seite, indem teure Operationen am echten DOM minimiert werden.

Shadow DOM ist ein Web-Standard, der es ermöglicht, die Struktur, Stile und das Verhalten einer Komponente zu kapseln. Es erstellt einen versteckten "Schatten"-Baum im DOM, der an ein Element im normalen DOM (Host-Element) angehängt ist. Der Inhalt des Shadow DOM ist vom Rest des Dokuments isoliert: Stile innerhalb davon beeinflussen die Außenwelt nicht, und umgekehrt. Dies ist nützlich, um wiederverwendbare, isolierte Komponenten zu erstellen, z.B. <video> oder <input type="range">.

Hauptunterschiede:

Merkmal	Normaler DOM	Virtual DOM	Shadow DOM
Darstellung	Reales Baum-API des Dokuments	Leichtgewichtige Darstellung im Speicher	Kapseltes DOM-Unterbaum
Zweck	API für Zugriff und Änderung des Dokuments	Optimierung der DOM-Aktualisierungen	Kapselung von Komponenten
Manipulationen	Direkt	Indirekt (durch Vergleich von Versionen)	Direkt, aber nur innerhalb des "Schatten"
Stilisolierung	Nein	Nein (außer bei Verwendung von CSS-in-JS oder Modulen)	Ja
Standard	Teil der Web-Plattform	Konzept von Frameworks	Teil der Web-Plattform