La complexité des projets Web a connu une croissance rapide ces dernières années. Ainsi, les sites modernes se caractérisent, d’une part, par un maillage de codes HTML, CSS et JavaScript complexe et, de l’autre, par l’intégration de contenus (widgets, images, vidéos, etc.) de plus en plus nombreux en provenance d’autres sources, telles que les réseaux sociaux, les plateformes 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 alternative de premier ordre à l’intégration de ce type de contenus tiers.
Dans l’article suivant, nous vous expliquons 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.
Le Shadow DOM est une sous-forme de la norme Document Object Models (DOM) et l’un des quatre piliers élémentaires de la norme des composants Web élaborée en 2012 par le consortium W3C. Un DOM « fantôme » est généré automatiquement par les navigateurs courants à partir du code HTML, tout comme un DOM ordinaire. Il ne s’applique toutefois pas à l’ensemble du projet Web, mais uniquement au(x) composant(s) du projet qui y est/sont exprimé(s). Les Shadow DOM distinguent les éléments contenus des spécifications de design et de structuration s’appliquant à l’ensemble des projets - telles que certaines déclarations 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.
En principe, la désignation de « modèle » est peu appropriée, aussi bien pour un DOM que pour un Shadow DOM. À proprement parler, les deux sont des interfaces d’accès aux données. Le modèle d’objet de base ne semble important que pour la validité de ces interfaces.
L’utilisation de Shadow DOM équivaut à posséder un nombre arbitraire d’arbres fantômes (« Shadow Trees ») en plus de l’arborescence 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écifique de l’arborescence du document parent ou d’un autre Shadow Tree. Dans les deux cas, ils sont appelés hôtes fantômes (« Shadow Host »). La transition entre le DOM normal et le DOM caché est appelée frontière fantôme (« Shadow Boundary »).
Pour utiliser l’interface Shadow DOM au sein d’un projet Web, il n'est pas nécessaire d’installer ou d’intégrer de logiciel supplémentaire. Dans la mesure où il ne s’agit techniquement que de créer un sous-arbre dans le code source, vous pouvez à tout moment introduire un nouveau Shadow DOM via le document HTML de votre application Web. Le rendu fonctionne plus tard avec le DOM complet de niveau supérieur, de sorte qu’aucune action supplémentaire n’est nécessaire pour cela non plus.
L’exemple suivant illustre la facilité avec laquelle il est possible d’intégrer des capsules DOM cachées subordonnées, par l’ajout au document HTML, via un simple JavaScript, d’un Shadow DOM comprenant un élément <p> répertoriant ses propres instructions 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).
Pour qu’un Shadow DOM puisse être contrôlé de l’extérieur via JavaScript, le statut de la méthode element.shadowRoot 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é.
Les Shadow DOM vous offrent une excellente opportunité de séparer les éléments individuels de votre projet Web du reste de votre site sans l’aide de technologies spéciales telles que les iFrames. Ils sont en outre désormais pris en charge sans restriction par les navigateurs les plus courants, au même titre que toutes les techniques des composants Web modernes. Ainsi, si vous souhaitez concevoir un composant ou une zone spécifique de votre site Web indépendamment des instructions de style et des structures de l’ensemble des documents qu’il contient, les DOM cachés constituent un bon choix, facile à mettre en œuvre, en particulier dans le cadre de projets complexes.
Cependant, vous ne pouvez pas transformer 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. Concrètement, les Shadow DOM sont limités aux composants HTML suivants :
Afin de protéger votre vie privée, la vidéo ne se chargera qu'après votre clic.
Il est possible de créer un site Internet sur Mac soi-même sans connaissances particulières en langage HTML, JavaScript, etc. Vous avez seulement besoin d’un éditeur de site Web simple et d’une idée de conception appropriée. Par ailleurs, des solutions de logiciels professionnels sont aussi disponibles et permettent la création de projets complexes tout en proposant une utilisation simple et...
Il a fallu attendre longtemps pour que HTML5 fasse son apparition en automne 2014. Sa première mise à jour, HTML 5.1, est désormais sortie. Elle apporte alors de nombreux changements : par-dessus tout, la une mise en place plus simple du responsive Web design est au cœur des attentions. Mais il faut ajouter à cela non seulement de nombreuses nouveautés HTML, mais aussi des attributs et éléments...
Avec la multiplication des systèmes de gestion de contenu et systèmes modulaires pour sites Web, on a vite l'impression qu’apprendre du HTML est une perte de temps. Mais tôt ou tard, si une page de votre site ne fonctionne plus ou si des éléments dynamiques doivent être ajoutés, vous ne pourrez aller très loin sans connaissance du langage Web. Dans ce tutoriel HTML, nous vous présenterons donc les...
Les sites Web et les applications sont en constante évolution. Il n’est pas rare que de nouvelles fonctionnalités promettent un site Web de meilleure qualité, plus sécurisé ou plus performant, raison pour laquelle leur implémentation relève souvent de la simple formalité. De nombreux navigateurs sont néanmoins à la traîne en ce qui concerne la prise en charge des nouvelles technologies Web. Ce...
Offrez un service performant et fiable à vos clients avec l'hébergement web de IONOS.
Voir les packs
