O shadow DOM é um tópico difícil de entender. É apenas complexo. Ele apresenta conceitos desconhecidos que não estamos acostumados a usar na Web. Limites de sombra, escopo de estilo, retargeting de eventos, pontos de inserção, pontos de inserção de sombra, nós de host, nós distribuídos...a gíria continua.
Uma coisa que é conceitualmente cansativa sobre o Shadow DOM é a maneira como seu produto final (DOM) é renderizado pelo navegador. Os nós do nó host são trocados magicamente para os pontos de inserção de uma ShadowRoot, mas, logicamente, ainda permanecem no nó host. Estranho. Assim, no momento da renderização, eles aparecem como parte da árvore de sombra, e não do host original. A forma como essa renderização acontece é uma das partes mais confusas do Shadow DOM.
Há alguns dias, lancei uma ferramenta em que tenho trabalhado chamada Shadow DOM Visualizer para ajudar a diminuir a curva de aprendizado.
Ele permite que você veja visualmente como o shadow DOM é renderizado no navegador, algo que falta no DevTools. Os dois blocos de código preto à esquerda são editáveis. Tente mudar os pontos de inserção <content>, removendo ou adicionando novos para ver como a árvore composta (renderizada) é afetada à direita.
Passe o cursor sobre os nós no gráfico para destacar a marcação relevante à esquerda. Viva a d3.js! Os nós azuis vêm 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 eles estão logicamente no shadow DOM, eles são coloridos em amarelo. A borda azul indica que eles convidam nós de host azuis para a renderização.
O DOM paralelo está disponível no Chrome 25, e o elemento <template> está disponível no Chrome 26. No entanto, você só precisa do primeiro para testar a demonstração.