Shadow DOM

Le Shadow DOM est une fonctionnalité native du navigateur qui permet de rattacher à un élément un second arbre DOM, séparé du document principal, dont le balisage et les styles sont isolés du reste de la page. Ce qui est déclaré à l'intérieur n'affecte pas l'extérieur, et réciproquement.

C'est une cloison, pas un décor. Le CSS d'une page ordinaire est global : une règle écrite pour un bandeau peut repeindre un bouton à l'autre bout du site. Le Shadow DOM ferme la pièce. Vous l'utilisez déjà sans le savoir : les contrôles d'une balise video ou le curseur d'un champ de type range sont construits par le navigateur dans un arbre de ce genre.

Comment ça marche

On attache une racine fantôme à un élément hôte, en mode ouvert ou fermé. Le mode ouvert laisse le JavaScript de la page accéder à l'arbre interne, le mode fermé le verrouille. À partir de là, les sélecteurs CSS du document ne descendent plus dans l'arbre interne, et les styles internes ne remontent pas.

L'isolation comporte des ouvertures volontaires. Les propriétés héritées, comme la couleur du texte ou la famille de polices, traversent la frontière. Les variables CSS personnalisées la traversent aussi : c'est le mécanisme de thème recommandé. Le sélecteur qui cible l'hôte permet de styler le composant depuis l'intérieur, et les parties explicitement exposées peuvent être stylées depuis l'extérieur. Enfin, les slots projettent du contenu de la page à l'intérieur de l'arbre fantôme : ce contenu reste stylé par la page, pas par le composant.

À quoi ça sert concrètement

• Protéger un widget embarqué chez un tiers des styles imprévisibles du site hôte
• Livrer un design system sans convention de nommage défensive ni collisions de classes
• Isoler une brique héritée pendant une refonte progressive
• Garantir qu'une mise à jour du CSS global ne cassera pas un composant critique

Les pièges

• L'accessibilité souffre : les références par identifiant, comme un libellé pointant vers un champ, ne traversent pas la frontière
• Les outils voient mal à l'intérieur : certains sélecteurs de test, scripts de mesure d'audience, extensions ou traducteurs automatiques ignorent l'arbre fantôme
• Le contenu injecté uniquement côté client dans une racine fantôme ne peut pas être considéré comme acquis pour l'indexation
• Tout ce que vous vouliez conserver du global (reset, polices d'icônes, thème) doit être réintroduit ou exposé, sinon le composant paraît nu

Quand l'utiliser, quand s'en passer

Utilisez-le pour du code distribué à l'extérieur, ou partagé entre équipes qui n'ont pas les mêmes conventions CSS. Passez-vous-en dans une application maîtrisée par une seule équipe, où des styles à portée locale suffisent, ou pour des composants de formulaire complexes où le coût d'accessibilité est disproportionné.