Nous avons vu il y a peu un nouvel élément HTML en voie de standardisation, le template tag. Cet élément est la première pierre de la création de composants web en HTML5. La seconde ? C’est l’objet de cet article avec le Shadow DOM, ou comment permettre une encapsulation en HTML.
Une des bonnes pratiques en développement consiste à créer des composants réutilisables pour faciliter la maintenance et éviter de ré-inventer constamment la roue. Mais en HTML/Javascript, ça n’est pas simple à mettre en place. Vous allez vous heurter à un problème de taille : il n’y a pas de possibilité de faire de véritable encapsulation. Cela veut dire que si vous créez un composant ou un widget, rien ne vous assure qu’en l’utilisant dans une page il n’entre pas en conflit avec des éléments du DOM ou des classes CSS de la page qui l’appelle.
Pour éviter cela, différents éléments sont en voie de standardisation pour permettre de créer des composants web robustes et encapsulés. Qui dit en cours de standardisation dit qu’il faut suivre de près ces évolutions mais ne pas les utiliser encore en production. Sachant qu’en plus ils ne sont pour l’instant supportés que par les dernières versions de Chrome.
Le Shadow DOM est un de ces nouveaux éléments.
Implémentation du Shadow DOM
Pour implémenter un Shadow DOM, il vous faut créer un Shadow root. Une fois ce Shadow root créé, vous pourrez l’injecter à un Shadow host. Dis comme cela ça paraît complexe, mais un petit exemple pour mieux comprendre :
– hôte (Shadow host)
<div id="monShadowHost"> Je suis le Shadow host </div>
– Shadow root
var monHost = document.querySelector('#monShadowHost');
var monShadow = monHost.webkitCreateShadowRoot();
monShadow.innerHTML = '<strong>Je suis le shadow root</strong>';
Cela aura pour effet de remplacer le contenu de « monShadowHost » par le texte « Je suis le shadow root ». Pour éviter le remplacement du contenu, vous allez pouvoir définir des points d’insertion via la balise <content>.
Pour des exemples plus complets, je vous conseille d’aller voir ce tutoriel très complet sur le toujours à la pointe HTML5rocks, ou de vous rendre ici si vous préférez la langue de Molière.
Pour aller encore plus loin et voir la partie CSS appliquée au Shadow DOM, rendez vous sur ce autre tutoriel chez HTML5rocks.
Mise à jour du 10 avril 2013 :
Un autre tutoriel sur le Shadow DOM a vu le jour, toujours sur HTML5Rocks à cette adresse.Vous y trouverez notamment un outil pour avoir une représentation visuelle du Shadow DOM, ce qui facilite grandement la vie.
