Quelles sont les différences entre shadow DOM, virtual DOM et DOM normal?

Shadow DOM :

• encapsulation : Crée un arbre DOM séparé et isolé à l’intérieur du document principal. Les styles et scripts à l’intérieur du Shadow DOM n’affectent pas le document principal par défaut, et vice versa.
• scoping : Idéal pour créer des composants réutilisables et indépendants (par exemple, des composants web).
• rendering : Le navigateur rend directement le Shadow DOM.

Virtual DOM :

• abstraction : Représente le DOM sous forme d’objets JavaScript en mémoire.
• diffing et patching : Utilisé par des frameworks (par exemple, React) pour optimiser les mises à jour. Lorsqu’un état change, le framework construit une nouvelle version du Virtual DOM, la compare à l’ancienne (diffing) et applique uniquement les changements nécessaires au DOM réel (patching).
• performance : Améliore la performance lors de mises à jour fréquentes du DOM, en minimisant l’interaction directe avec l’API du navigateur.
• pas une fonctionnalité du navigateur : C’est un concept implémenté au niveau de JavaScript, pas une capacité native du navigateur.

DOM traditionnel (Document Object Model) :

• représentation : Représente un arbre de nœuds (éléments, attributs, texte), correspondant à la structure du document HTML.
• API : Fournit une API pour accéder et manipuler la structure et le contenu du document.
• rendering : Le navigateur rend le DOM réel.
• manipulation directe : Les changements sont effectués directement sur le DOM réel, ce qui peut être lent avec beaucoup de mises à jour.

Tableau récapitulatif :

Caractéristique	Shadow DOM	Virtual DOM	DOM traditionnel
Objectif	Encapsulation de composants	Optimisation des mises à jour du DOM	Représentation de la structure HTML
Nature	Fonctionnalité native du navigateur	Concept implémenté en JS	Structure native du navigateur
Isolation	Oui, au niveau du DOM et du CSS	Non, c’est une représentation	Non
Interaction	Interaction directe du navigateur	Diffing/patching d’abord, puis DOM	Interaction directe du navigateur
Utilisation	Composants web	Frameworks (React, Vue, etc.)	API web de base