Le Shadow DOM est un sujet difficile à comprendre. C'est juste complexe. Il introduit des concepts inconnus que nous n'avons pas l'habitude de voir sur le Web. Limites d'ombre, champ d'application du style, retargeting d'événements, points d'insertion, points d'insertion d'ombre, nœuds hôtes, nœuds distribués, etc. Le jargon est interminable.
L'aspect conceptuellement complexe du Shadow DOM est la façon dont le navigateur affiche votre produit final (DOM). Les nœuds du nœud hôte sont magiquement mélangés dans les points d'insertion d'un ShadowRoot, mais restent logiquement dans le nœud hôte. Bizarre ! Par conséquent, au moment du rendu, ils apparaissent dans l'arborescence d'ombre et non dans l'hôte d'origine. La façon dont cet affichage se produit est l'un des éléments les plus déroutants de Shadow DOM.
Il y a quelques jours, j'ai publié un outil sur lequel je travaillais, appelé Visualiseur du DOM ombragé, pour réduire la courbe d'apprentissage.
Il vous permet de voir visuellement comment le Shadow DOM s'affiche dans le navigateur, ce qui manque actuellement aux outils pour les développeurs. Les deux blocs de code noir à gauche sont modifiables. Essayez de modifier les points d'insertion <content>, de les supprimer ou d'en ajouter pour voir l'impact sur l'arborescence composée (affichée) à droite.
Pointez sur les nœuds du graphique pour mettre en surbrillance la balise correspondante sur la gauche. Bravo pour d3.js ! Les nœuds bleus proviennent du nœud hôte. Les nœuds jaunes proviennent du Shadow DOM. Les points d'insertion <content> constituent le pont entre les deux mondes. Comme ils se trouvent logiquement dans le Shadow DOM, ils sont de couleur jaune. Leur bordure bleue indique qu'ils invitent des nœuds hôtes bleus à la partie de rendu.
Le Shadow DOM est disponible dans Chrome 25 et l'élément <template> dans Chrome 26 (bien que vous n'ayez besoin que du premier pour essayer la démonstration).