Shadow DOM es un tema difícil de entender. Es simplemente complejo. Presenta conceptos desconocidos a los que no estamos acostumbrados en la Web. Límites de sombras, alcance de estilos, resegmentación de eventos, puntos de inserción, puntos de inserción de sombras, nodos de host, nodos distribuidos, etc., la jerga continúa.
Un aspecto conceptual de Shadow DOM es la forma en que el navegador renderiza tu producto final (DOM). Los nodos del nodo host se introducen mágicamente en los puntos de inserción de ShadowRoot, aunque, lógicamente, permanecen en el nodo host. ¡Qué raro! Por lo tanto, en el momento de la renderización, aparecen como parte del shadow tree y no del host original. La forma en que se realiza esta renderización es una de las partes más confusas de Shadow DOM.
Hace unos días, lancé una herramienta en la que he estado trabajando llamada Shadow DOM Visualizer para ayudar a disminuir la curva de aprendizaje.
Te permite ver de manera visual cómo se renderiza Shadow DOM en el navegador, algo que las Herramientas para desarrolladores no tienen en la actualidad. Se pueden editar los dos bloques de código negro de la izquierda. Intenta cambiar los puntos de inserción <content>, quitarlos o agregar otros nuevos para ver cómo se ve afectado el árbol compuesto (renderizado) en la parte derecha.
Pasa el mouse sobre los nodos del gráfico para destacar la marca relevante a la izquierda. ¡Buenas noticias! d3.js Los nodos azules provienen del nodo host. Los nodos amarillos provienen del Shadow DOM. Los puntos de inserción <content> son el puente entre los dos mundos. Como lógicamente están en el Shadow DOM, se muestran en amarillo. El borde azul indica que invitan a los nodos host azules al grupo 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).