Wat zijn de verschillen tussen shadow DOM, virtual DOM en normaal DOM?

Shadow DOM:

• encapsulatie: Creëert een aparte, geïsoleerde DOM-boom binnen het hoofddocument. Stijlen en scripts binnen Shadow DOM beïnvloeden standaard niet het hoofddocument en vice versa.
• scoping: Ideaal voor het maken van herbruikbare, onafhankelijke componenten (bijvoorbeeld webcomponenten).
• rendering: De browser rendert Shadow DOM direct.

Virtual DOM:

• abstractie: Is een representatie van de DOM in de vorm van JavaScript-objecten in het geheugen.
• diffing en patching: Gebruikt door frameworks (bijvoorbeeld React) om updates te optimaliseren. Bij statuswijzigingen bouwt het framework een nieuwe versie van Virtual DOM, vergelijkt deze met de vorige (diffing) en past alleen de noodzakelijke wijzigingen toe op de echte DOM (patching).
• prestaties: Verbetert de prestaties bij frequente DOM-updates, door directe interactie met de browser-API te minimaliseren.
• geen browserfunctie: Het is een concept dat op JavaScript-niveau is geïmplementeerd en geen native browserfunctie.

Gewoon DOM (Document Object Model):

• representatie: Vertegenwoordigt een boom van knooppunten (elementen, attributen, tekst), die overeenkomt met de structuur van het HTML-document.
• API: Biedt een API voor toegang tot en manipulatie van de structuur en inhoud van het document.
• rendering: De browser rendert het echte DOM.
• directe manipulatie: Wijzigingen worden direct aangebracht in het echte DOM, wat traag kan zijn bij veel updates.

Samenvattingstabel:

Eigenschap	Shadow DOM	Virtual DOM	Gewoon DOM
Doel	Componentencapsulatie	Optimalisatie van DOM-updates	Weergave van HTML-structuur
Natuur	Natuurlijke browserfunctie	Concept geïmplementeerd in JS	Natuurlijke browserstructuur
Isolatie	Ja, op DOM- en CSS-niveau	Nee, het is slechts een representatie	Nee
Interactie	Directe browserinteractie	Eerst diffing/patching, dan DOM	Directe browserinteractie
Gebruik	Webcomponenten	Frameworks (React, Vue, etc.)	Basis web API