Shadow DOM es un tema difícil de entender. Es solo complejo. Presenta conceptos desconocidos a los que no estamos acostumbrados en la Web. Bordes de sombras, alcance de diseño, segmentación de eventos, puntos de inserción, puntos de inserción de sombras, nodos de host, nodos distribuidos… la jerga sigue y sigue.
Una cosa que es conceptualmente exigente sobre Shadow DOM es la forma en que el navegador renderiza tu producto final (DOM). Los nodos del nodo host se intercambian mágicamente en los puntos de inserción de un ShadowRoot, pero, lógicamente, siguen en el nodo host. ¡Qué raro! Por lo tanto, en el momento de la renderización, aparecen como parte del árbol de sombras y no del host original. La forma en que se lleva a cabo esta renderización es una de las partes más confusas de Shadow DOM.
Hace unos días, lancé una herramienta en la que estaba trabajando llamada Visualizador de DOM de sombra para ayudar a reducir la curva de aprendizaje.
Te permite ver visualmente cómo se renderiza el Shadow DOM en el navegador, algo que DevTools no tiene en la actualidad. Ambos bloques de código negro a la izquierda son editables. Intenta cambiar los puntos de inserción <content>, quitarlos o agregar otros nuevos para ver cómo se ve afectado el árbol compuesto (renderizado) a la derecha.
Coloca el cursor sobre los nodos del gráfico para destacar el marcado relevante a la izquierda. ¡Felicidades a d3.js! Los nodos azules provienen del nodo host. Los nodos amarillos provienen del Shadow DOM. Los puntos de inserción de <content> son el puente entre los dos mundos. Como están lógicamente en el DOM sombreado, tienen el color amarillo. Su borde azul indica que invitan a nodos host azules a la fiesta de renderización.
Shadow DOM está disponible en Chrome 25 y el elemento <template> está disponible en Chrome 26 (aunque solo necesitas el primero para probar la demostración).