O Shadow DOM é um assunto difícil de entender. É complexo. Ele apresenta conceitos desconhecidos que não conhecemos na Web. Limites de sombra, escopo de estilização, nova segmentação de eventos, pontos de inserção, pontos de inserção de sombra, nós de host, nós distribuídos...e assim por diante.
Do ponto de vista conceitual do Shadow DOM, a forma como o produto final (DOM) é renderizado pelo navegador é muito importante. Os nós do nó host são magicamente transferidos para os pontos de inserção de um ShadowRoot, mas, logicamente, permanecem no nó host. Estranho! Portanto, no momento da renderização, eles aparecem como parte da árvore paralela, e não como o host original. A forma como essa renderização ocorre é uma das partes mais confusas do Shadow DOM.
Alguns dias atrás, lancei uma ferramenta em que estou trabalhando, chamada Shadow DOM Visualizer, para ajudar a diminuir a curva de aprendizado.
Ela permite uma visualização visual de como o Shadow DOM é renderizado no navegador, algo que não está disponível no DevTools atualmente. Os dois blocos de código preto à esquerda são editáveis. Tente mudar, remover ou adicionar novos pontos de inserção da <content> para conferir como a árvore composta (renderizada) é afetada à direita.
Passe o mouse sobre os nós no gráfico para destacar a marcação relevante à esquerda. Eba para d3.js! Os nós azuis estão vindo do nó host. Os nós amarelos vêm do Shadow DOM. Os pontos de inserção <content> são a ponte
entre os dois mundos. Como estão logicamente no Shadow DOM, eles são exibidos em amarelo. A borda azul indica que eles convidam nós do host azuis para a parte de renderização.
O Shadow DOM está disponível no Chrome 25, e o elemento <template> está disponível no Chrome 26 (embora você só precise do primeiro para testar a demonstração).