Comprendre le Shadow DOM

Le Shadow DOM est une fonctionnalité native des navigateurs web, qui permet d’encapsuler un sous-arbre DOM dans un composant, afin de l’isoler du reste de la page.

C’est grâce à cette technologie que l’on peut créer des Web Components : des composants HTML autonomes, réutilisables, et modulaires.

Voyons plus en détail comment cela fonctionne !

La différence avec le DOM

Le DOM (Document Object Model) représente la structure HTML d’une page. C’est un arbre composé de nœuds (éléments, textes, attributs…) que l’on peut notamment modifier avec JavaScript.

Par défaut, tous les éléments HTML d’une page partagent le même DOM, et peuvent interagir entre eux.

Par exemple :

• Une feuille de style peut cibler n’importe quel élément, peu importe sa position.
• Un script peut ajouter, modifier ou supprimer n’importe quel nœud avec document.querySelector().

Cela peut vite devenir problématique dans une grosse application : les composants peuvent se polluer mutuellement (effets de bord, conflits de style, sélecteurs trop généraux…).

Le Shadow DOM : un DOM isolé

Le Shadow DOM est un sous-arbre DOM totalement isolé. Il est rattaché à un élément hôte (appelé shadow host) mais invisible depuis l’extérieur.

Les styles et les scripts à l’intérieur d’un Shadow DOM ne s’appliquent qu’à lui.

Cela permet de créer des composants vraiment encapsulés : leur HTML, leur CSS et leur logique sont internes et protégés.

Créer un shadow DOM simple

Voilà comment créer un shadow DOM, avec quelques lignes de JavaScript :

const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });

const span = document.createElement("span");
span.textContent = "I'm in the shadow DOM";

shadow.appendChild(span);

Ici, vous aurez remarqué que le shadow DOM est créé en mode open

Cela signifie que l’on peut interagir avec l’intérieur du shadow DOM, même depuis l’extérieur.

Si l’on veut que la logique et les éléments ne soient pas accessibles depuis l’extérieur, on pourra le créer en mode close , mais cela implique quelques subtilités.

Déjà utilisé par les navigateurs

Le Shadow DOM est utilisé en interne par les navigateurs depuis longtemps, pour créer les composants HTML complexes intégrés.

Par exemple, l’élément <video> contient un lecteur avec boutons, barre de progression, etc. Tous ces éléments sont encapsulés dans un Shadow DOM, et donc inaccessibles via le CSS global ou querySelector().

Shadow DOM vs Virtual DOM

On confond parfois Shadow DOM avec Virtual DOM, mais ce sont deux choses très différentes :

• Le Shadow DOM est une fonctionnalité native des navigateurs pour encapsuler du DOM.
• Le Virtual DOM, utilisé par React (et Vue), est une copie du DOM en mémoire, utilisée pour optimiser les mises à jour de l’interface.

Pour mieux comprendre le Virtual DOM, consultez notre article dédié.

Créer ses propres Web Components

La principale utilité du shadow DOM est de pouvoir créer des « Web Components » : des composants réutilisables, paramétrables, et dont la logique et le style est indépendant du reste de la page web.

Si vous voulez apprendre à créer un Web Component de zéro, vous pouvez suivre notre article pas à pas : https://code-garage.com/blog/apprendre-a-creer-un-web-component-basique