Shadow DOM est un sujet difficile à aborder. C'est tout simplement complexe. Il introduit des concepts inconnus auxquels nous ne sommes pas habitués sur le Web. Limites des ombres, portée des styles, reciblage d'événements, points d'insertion, points d'insertion d'ombres, nœuds hôtes, nœuds distribués, etc.
L'une des problématiques conceptuelles liées à Shadow DOM est la façon dont votre produit final (DOM) est rendu par le navigateur. Les nœuds du nœud hôte sont introduits comme par magie dans les points d'insertion d'un ShadowRoot, tout en restant logiquement dans le nœud hôte. C'est étrange ! Ainsi, au moment de l'affichage, elles apparaissent dans l'arborescence fantôme et non dans l'hôte d'origine. La façon dont ce rendu se produit est l'un des éléments les plus déroutants de Shadow DOM.
Il y a quelques jours, j'ai lancé un outil sur lequel j'ai travaillé, appelé Shadow DOM Visualizer pour réduire la phase d'apprentissage.
Il vous permet de visualiser comment Shadow DOM effectue le rendu dans le navigateur, ce que les outils de développement n'ont pas encore à l'heure actuelle. Vous pouvez modifier les deux blocs de code noirs situés à gauche. Essayez de modifier les points d'insertion <content>, de les supprimer ou d'en ajouter d'autres pour voir comment l'arborescence composée (rendue) est affectée sur la droite.
Passez la souris sur les nœuds du graphique pour sélectionner le balisage approprié 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 la passerelle entre les deux mondes. Comme ils sont logiquement dans Shadow DOM, ils sont colorés en jaune. Leur bordure bleue indique qu'ils invitent les nœuds hôtes bleus dans le groupe de rendu.
Shadow DOM est disponible dans Chrome 25 et l'élément <template> dans Chrome 26 (même si vous n'avez besoin que du premier pour essayer la démo).