En discutant avec des collègues je me suis rendu compte plusieurs fois que la différence entre Shadow DOM et Virtual DOM n'était pas très bien comprise. D'ailleurs ces deux concepts ne sont pas compris eux-mêmes souvent ce qui crée la mécompréhension de la différence entre les deux.

Je me lance ici dans un petit résumer de ce qu'il faut savoir, hésitez pas à me dire si je me trompe !

Shadow DOM ? kézako ?

Pour commencer il faut comprendre qu'il s'agit avant tout d'une spécification du W3C et qui concerne le DOM et la manière dont on va donner accès à des éléments html. En général ce concept est couplé à celui des Web Components et des Custom Element qui en découlent.

Le but du Shadow DOM c'est un moyen de cloisonner d'arbre d'élément qui est à l'intérieur d'un élément du reste du DOM. De cette manière on aura par exemple du style qui sera appliqué à tout le DOM sauf ce qui est contenu dans le Shadow DOM, et inversement le style appliqué à l'intérieur du Shadow DOM ne le sera pas au reste du DOM.

Le but du Shadow DOM est globalement de masquer la complexité d'un Web Component ou simplement d'un élément du DOM. Pensez à une sorte d'iframe ultra légère qui ne ferait que cloisonner un contenu d'un autre.

Vous avez dit Virtual DOM ?

Le Virtual DOM a été introduit par le framework React. En tout cas c'est ce framework qui a popularisé cette approche. Ici il n'y a pas de spécification en jeu. Aucun lien avec un standard quelconque. On parle uniquement de la façon dont certains frameworks vont gérer l'affichage des éléments et leur actualisation.

Prenons l'exemple de React. Imaginons qu'on crée un composant React. Quand on demande à React de rendre un composant visible il ne va pas directement l'afficher en le transformant en un arbre d'élément DOM. Ce que fait React c'est d'abord actualisé un faux DOM qui est conservé en mémoire par React. Ensuite une routine sera activée pour que le DOM qui est affiché à l'utilisateur corresponde au faux DOM géré par React. Cette étape est entre autres utilisée par React pour optimiser le nombre de modification du DOM à effectuer pour rendre l'affichage qu'on souhaite.

Pour faire un court un framework qui gère un Virtual DOM va continuellement gérer deux DOM : un Virtual DOM (invisible pour les développeurs et les utilisateurs) et le vrai DOM (qui est visible dans le navigateur). En tant que développeur on va agir sur le Virtual DOM. Le framework fera en sorte de répliquer ces changements via le moins d'actions possible (ce qu'on appelle la réconciliation en React) et nous donner accès aux évènements utilisateurs.

Shadow DOM ou Virtual DOM ? Lequel est le mieux du coup ?

Eh bien aucun et les deux en même temps !

Si vous avez compris mes explications, vous aurez compris qu'il n'y a pas de concurrence entre ces deux concepts. Le premier est une technologie native des navigateurs qu'il suffit d'activer sur un élément. L'autre est une technique utilisée par certains frameworks frontend pour gérer la manière d'afficher les différents éléments d'une page.

On pourrait d'ailleurs imaginer un framework qui utiliserait les deux techniques. React pourrait transformer chaque composant que l'on crée (ou seulement ceux sur lesquels on appliquerait un traitement) en un Custom Element qui contiendrait un Shadow DOM. Ce qui pourrait être pratique pour l'isolation des styles CSS entre autres.

Ressources:

Crédit photo : https://pixabay.com/photos/sunset-cat-shadows-silhouettes-3008779/