Wat is het verschil tussen Shadow DOM, Virtual DOM en normaal DOM?

DOM (Document Object Model) is een API voor HTML- en XML-documenten. Het vertegenwoordigt een knooppuntboom, waarbij elk knooppunt overeenkomt met een element, attribuut of tekstfragment van het document. Het wordt gebruikt om toegang te krijgen tot en te manipuleren van de structuur, stijlen en inhoud van webpagina's. Directe manipulaties van DOM kunnen traag zijn vanwege de noodzaak om stijlen, lay-out en hertekening te herberekenen.

Virtual DOM is een concept dat wordt gebruikt in frameworks zoals React of Vue. Het is een representatie van de DOM-boom die in het geheugen wordt opgeslagen. Wanneer de gegevens van een component veranderen, maakt het framework een nieuwe virtuele DOM-boom. Vervolgens vergelijkt het deze met de vorige virtuele boom (diffing) en bepaalt het de minimale set wijzigingen die op de echte DOM moeten worden toegepast. Dit optimaliseert de paginabewerking door dure operaties op de echte DOM te minimaliseren.

Shadow DOM is een webstandaard die het mogelijk maakt om de structuur, stijlen en gedrag van een component te encapsuleren. Het creëert een verborgen "schaduw"-boom van de DOM, verbonden met een element in de normale DOM (host-element). De inhoud van Shadow DOM is geïsoleerd van de rest van het document: de stijlen binnenin beïnvloeden de buitenwereld niet, en vice versa. Dit is handig voor het maken van herbruikbare, geïsoleerde componenten, zoals <video> of <input type="range">.

Belangrijkste verschillen:

Kenmerk	Gewone DOM	Virtual DOM	Shadow DOM
Representatie	Echte boom van het document API	Lichtgewicht representatie van de DOM in geheugen	Geïsoleerde DOM-onderboom
Doel	API voor toegang en wijziging van het document	Optimalisatie van DOM-bijwerkingen	Encapsulatie van componenten
Manipulaties	Direct	Indirect (via vergelijking van versies)	Direct, maar alleen binnen "schaduw"
Stijlisolatie	Nee	Nee (behalve bij gebruik van CSS-in-JS of modules)	Ja
Standaard	Deel van het webplatform	Framework-concepten	Deel van het webplatform