3. Le DOM de l’ombre

Ce nom est génial, avouons-le. Imaginez la tête que vont faire vos camarades ou vos collègues quand vous leur direz que vous utilisez le DOM de l’ombre pour vos développements !

Dans la suite du cours j’emploierai le terme anglais : le Shadow DOM, c’est encore plus impressionnant ! 😅

L’objectif du shadow DOM est de permettre d’encapsuler nos éléments personnalisés de manière sûre (c’est-à-dire de les isoler du reste de la page), afin d’éviter tout conflit avec les éléments de la page. Retenez ce principe, et vous avez déjà fait la moitié du travail !

Le Shadow DOM représente donc un ensemble de spécifications qui est supporté par les standards récents du Web, afin d’isoler le JavaScript, le CSS et le HTML d’un élément personnalisé du reste de la page.

Cela permet donc de créer un nouveau DOM qui n’est pas rattaché au DOM principal, donc le DOM principal ne peut plus accéder à nos shadow DOM, et c’est là que ça devient intéressant.

Pourquoi tu dis ‘nos shadow DOM’, on peut en créer plusieurs ?

Oui, vous aurez exactement un nouveau Shadow DOM pour chaque élément personnalisé, afin que chacun d’eux puisse profiter du système d’encapsulation.

Vous voulez voir en pratique comment cela fonctionne ? Pas de soucis, nous allons créer un Shadow DOM.

Un Shadow DOM doit toujours être rattaché à un élément existant, que ce soit un élément présent dans votre fichier HTML, ou un élément créé depuis un script. Et il est bien sûr possible de rattacher un Shadow DOM à un élément personnalisé, comme <mon-element> par exemple !

Créons simplement un paragraphe avec un identifiant unique :

<!—Un simple paragraphe -->
<p id="paragraphe-shadow"><p>

Et maintenant ajoutons un Shadow DOM sur ce paragraphe :

// On crée un nouveau Shadow DOM sur un élément de notre page, 
// qui possède l'indentifiant 'paragraphe-shadow' :
var shadow = document.querySelector('#paragraphe-shadow').attachShadow({mode: 'open'}); 

// Pour l'instant notre Shadow DOM est vide, mais nous pouvons lui ajouter du contenu. 
shadow.innerHTML = "<p id='shadow'>Salut, Shadow DOM !</p>";

// Si on recherche notre contenu caché depuis la console du navigateur,
// alors la commande suivante ne retourne rien, car le DOM n'a pas accès au Shadow DOM ! 
document.querySelectorAll('#paragraphe-shadow');

Comme vous le constatez, il suffit d’utiliser la méthode Element.attachShadow pour instancier un nouveau Shadow DOM. Cette méthode prend un paramètre qui permet d’indiquer si on souhaite accéder au DOM de l’ombre en utilisant du code JavaScript écrit dans le contexte principal de la page. C’est le cas pour nous, car nous avons défini ce paramèter à ‘open‘. La méthode attachShadow retourne ensuite un nouveau Shadow DOM si vous avez défini le paramètre à open et retourne null si vous avez définis le paramètre à closed.

Comme promis, vous pouvez ajouter du CSS qui ne sera appliqué qu’aux éléments de ce Shadow DOM, en l’occurrence votre élément ‘paragraphe-shadow’ :

// On ajoute un peu de style à notre Shadow DOM 
shadow.innerHTML += '<style>p {color: red;}</style>';

Si vous testez ce code, vous vous apercevrez que seuls les paragraphes de notre Shadow DOM ont un texte rouge !