La com­plexité des projets Web a connu une crois­sance rapide ces dernières années. Ainsi, les sites modernes se ca­rac­té­ri­sent, d’une part, par un maillage de codes HTML, CSS et Ja­vaS­cript complexe et, de l’autre, par l’in­té­gra­tion de contenus (widgets, images, vidéos, etc.) de plus en plus nombreux en pro­ve­nance d’autres sources, telles que les réseaux sociaux, les pla­te­formes de streaming ou les réseaux de diffusion de contenu (DCN). Si cela ne doit pas se faire via iFrame, Shadow DOM offre une solution al­ter­na­tive de premier ordre à l’in­té­gra­tion de ce type de contenus tiers.

Dans l’article suivant, nous vous ex­pli­quons en quoi consiste ce sous-niveau du Document Object Model (DOM), à quels autres scénarios il est adapté et comment le mettre en œuvre pour votre propre site Web.

Que recouvre le Shadow DOM ?

Le Shadow DOM est une sous-forme de la norme Document Object Models (DOM) et l’un des quatre piliers élé­men­taires de la norme des com­po­sants Web élaborée en 2012 par le con­sor­tium W3C. Un DOM « fantôme » est généré au­to­ma­ti­que­ment par les na­vi­ga­teurs courants à partir du code HTML, tout comme un DOM ordinaire. Il ne s’applique toutefois pas à l’ensemble du projet Web, mais uni­que­ment au(x) composant(s) du projet qui y est/sont exprimé(s). Les Shadow DOM dis­tin­guent les éléments contenus des spé­ci­fi­ca­tions de design et de struc­tu­ra­tion s’ap­pli­quant à l’ensemble des projets - telles que certaines dé­cla­ra­tions CSS. En bref, les Shadow DOM sont des capsules de code autonomes possédant une plage de validité propre au sein d’un DOM ordinaire.

Note

En principe, la dé­sig­na­tion de « modèle » est peu ap­pro­priée, aussi bien pour un DOM que pour un Shadow DOM. À pro­pre­ment parler, les deux sont des in­ter­faces d’accès aux données. Le modèle d’objet de base ne semble important que pour la validité de ces in­ter­faces.

Comment sont struc­tu­rés les Shadow DOM ?

L’uti­li­sa­tion de Shadow DOM équivaut à posséder un nombre ar­bi­traire d’arbres fantômes (« Shadow Trees ») en plus de l’ar­bo­res­cence de documents générale résumant la structure DOM de l’ensemble du projet. Chaque arbre, dont la racine est appelée racine fantôme (« Shadow Root »), contient ses propres éléments et son propre style. Les arbres sont toujours affectés à un élément spé­ci­fique de l’ar­bo­res­cence du document parent ou d’un autre Shadow Tree. Dans les deux cas, ils sont appelés hôtes fantômes (« Shadow Host »). La tran­si­tion entre le DOM normal et le DOM caché est appelée frontière fantôme (« Shadow Boundary »).

Image: Shadow DOM : représentation schématique
Le contenu d’un Shadow Tree n’est pas influencé par les éléments ex­té­rieurs et n’affecte pas non plus les contenus externes.

Comment fonc­tionne l’uti­li­sa­tion ou la mise en œuvre des Shadow DOM ?

Pour utiliser l’interface Shadow DOM au sein d’un projet Web, il n'est pas né­ces­saire d’installer ou d’intégrer de logiciel sup­plé­men­taire. Dans la mesure où il ne s’agit tech­ni­que­ment que de créer un sous-arbre dans le code source, vous pouvez à tout moment in­tro­duire un nouveau Shadow DOM via le document HTML de votre ap­pli­ca­tion Web. Le rendu fonc­tionne plus tard avec le DOM complet de niveau supérieur, de sorte qu’aucune action sup­plé­men­taire n’est né­ces­saire pour cela non plus.

L’exemple suivant illustre la facilité avec laquelle il est possible d’intégrer des capsules DOM cachées su­bor­don­nées, par l’ajout au document HTML, via un simple Ja­vaS­cript, d’un Shadow DOM com­pre­nant un élément <p> ré­per­to­riant ses propres ins­truc­tions de style :

<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
    // Générer le Shadow DOM pour le Shadow Host:
    var shadow = document.querySelector('#hostElement').createShadowRoot();
    // Création élément HTML dans le Shadow DOM:
shadow.innerHTML = '<p>Texte disponible dans le Shadow DOM.</p>';
    // Définir l’élément HTML dans le Shadow DOM:
shadow.innerHTML += '<style>p { color: red; }</style>';
</script>
</body>
</html>

Le script de mise en œuvre du Shadow DOM se compose donc de trois éléments : dans un premier temps, le sous-document caché est généré, il reçoit ensuite un simple élément de texte et, pour finir, le troisième élément est utilisé pour manipuler la couleur de ce texte (dans ce cas : « red », c’est-à-dire rouge).

Note

Pour qu’un Shadow DOM puisse être contrôlé de l’extérieur via Ja­vaS­cript, le statut de la méthode element.sha­do­wRoot doit par ailleurs être défini sur « open » (ouvert). Si, au contraire, il est défini sur « fermé », l’accès au DOM caché est refusé.

Pour quels scénarios le Shadow DOM est-il adapté ?

Les Shadow DOM vous offrent une ex­cel­lente op­por­tu­nité de séparer les éléments in­di­vi­duels de votre projet Web du reste de votre site sans l’aide de tech­no­lo­gies spéciales telles que les iFrames. Ils sont en outre désormais pris en charge sans res­tric­tion par les na­vi­ga­teurs les plus courants, au même titre que toutes les tech­niques des com­po­sants Web modernes. Ainsi, si vous souhaitez concevoir un composant ou une zone spé­ci­fique de votre site Web in­dé­pen­dam­ment des ins­truc­tions de style et des struc­tures de l’ensemble des documents qu’il contient, les DOM cachés cons­ti­tuent un bon choix, facile à mettre en œuvre, en par­ti­cu­lier dans le cadre de projets complexes.

Cependant, vous ne pouvez pas trans­for­mer tous les éléments HTML en hôte fantôme. Et si vous appliquez cette technique à un fichier image, un message d’erreur s’affichera. Con­crè­te­ment, les Shadow DOM sont limités aux com­po­sants HTML suivants :

  • article
  • aside
  • blo­ck­quote
  • body
  • div
  • footer
  • h1, h2, h3, h4, h5, h6
  • header
  • main
  • nav
  • p
  • section
  • span
7wSOoG_REKc.jpg Pour afficher cette vidéo, des cookies de tiers sont nécessaires. Vous pouvez consulter et modifier vos paramètres de cookies ici.
Aller au menu principal