Was sind die Unterschiede zwischen Shadow DOM, Virtual DOM und normalem DOM?

Shadow DOM:

• Kapselung: Erstellt einen separaten, isolierten DOM-Baum innerhalb des Hauptdokuments. Stile und Skripte im Shadow DOM beeinflussen standardmäßig nicht das Hauptdokument und umgekehrt.
• Scoping: Ideal für die Erstellung wiederverwendbarer, unabhängiger Komponenten (z.B. Web-Komponenten).
• Rendering: Der Browser rendert das Shadow DOM direkt.

Virtueller DOM:

• Abstraktion: Ist eine Darstellung des DOM in Form von JavaScript-Objekten im Speicher.
• Diffing und Patching: Wird von Frameworks (z.B. React) zur Optimierung der Aktualisierungen verwendet. Bei Zustandsänderungen erstellt das Framework eine neue Version des Virtual DOM, vergleicht sie mit der vorherigen (diffing) und wendet nur die notwendigen Änderungen am echten DOM an (patching).
• Leistung: Verbessert die Leistung bei häufigen DOM-Updates, indem die direkte Interaktion mit der Browser-API minimiert wird.
• Kein Browser-Feature: Es ist ein Konzept, das auf JavaScript-Ebene implementiert ist und keine native Browserfunktion ist.

Normales DOM (Document Object Model):

• Darstellung: Repräsentiert einen Baum von Knoten (Elemente, Attribute, Text), entsprechend der Struktur des HTML-Dokuments.
• API: Bietet eine API zum Zugriff und zur Manipulation der Struktur und des Inhalts des Dokuments.
• Rendering: Der Browser rendert das echte DOM.
• Direkte Manipulation: Änderungen werden direkt am echten DOM vorgenommen, was bei vielen Updates langsam sein kann.

Übersichtstabelle:

Eigenschaft	Shadow DOM	Virtual DOM	Normales DOM
Zweck	Komponenten-Kapselung	Optimierung der DOM-Aktualisierungen	Darstellung der HTML-Struktur
Natur	Native Browserfunktionalität	In JavaScript implementiertes Konzept	Native Browserstruktur
Isolation	Ja, auf DOM- und CSS-Ebene	Nein, nur eine Darstellung	Nein
Interaktion	Direkte Browserinteraktion	Zuerst diffing/patching, dann DOM	Direkte Browserinteraktion
Verwendung	Web-Komponenten	Frameworks (React, Vue usw.)	Grundlegende Web-API