Quelle est la différence entre Shadow DOM, Virtual DOM et DOM normal?

DOM (Document Object Model) est une API pour les documents HTML et XML. Il représente un arbre de nœuds, où chaque nœud correspond à un élément, un attribut ou un fragment de texte du document. Il est utilisé pour accéder et manipuler la structure, les styles et le contenu des pages web. Les manipulations directes du DOM peuvent être lentes en raison de la nécessité de recalculer les styles, la mise en page et de redessiner.

Virtual DOM est un concept utilisé dans des frameworks comme React ou Vue. C'est une représentation de l'arbre DOM stockée en mémoire. Lorsque les données du composant changent, le framework crée un nouvel arbre Virtual DOM. Ensuite, il le compare avec l'arbre virtuel précédent (diffing) et détermine le minimum de changements à appliquer au DOM réel. Cela permet d'optimiser la mise à jour de la page en minimisant les opérations coûteuses sur le DOM réel.

Shadow DOM est une norme web qui permet d'encapsuler la structure, les styles et le comportement d'un composant. Il crée un arbre DOM "ombre" caché, connecté à un élément dans le DOM normal (élément hôte). Le contenu du Shadow DOM est isolé du reste du document : les styles à l'intérieur n'affectent pas le monde extérieur, et vice versa. Cela est utile pour créer des composants réutilisables et isolés, comme <video> ou <input type="range">.

Principales différences :

Caractéristique	DOM normal	Virtual DOM	Shadow DOM
Représentation	Arbre réel du document API	Représentation légère du DOM en mémoire	Sous-arbre DOM encapsulé
But	API pour accéder et modifier le document	Optimisation des mises à jour du DOM	Encapsulation des composants
Manipulations	Directes	Indirectes (par comparaison de versions)	Directes, mais uniquement à l'intérieur de "l'ombre"
Isolation des styles	Non	Non (sauf si CSS-in-JS ou modules)	Oui
Norme	Partie de la plateforme web	Concept des frameworks	Partie de la plateforme web