Que es shadow root

99

En las herramientas para desarrolladores de Google Chrome, veo una etiqueta #shadow-rootdebajo de la derecha <html lang="en">. ¿Qué hace y para qué se utiliza? No lo veo en Firefox ni en IE; solo en Chrome, ¿es esta una función especial?

Si lo abro, muestra <head>y <body>y un enlace al lado de named reveal, al hacer clic, apunta a <head>y <body>, nada más.

html google-chrome dom google-chrome-devtools Andrés
fuente

Respuestas:

97

Este es un indicador especial de que existe un Shadow DOM . Estos han existido durante años, pero los desarrolladores nunca han recibido API hasta hace poco. Chrome ha tenido esta funcionalidad por un tiempo, otros navegadores aún se están poniendo al día. Se puede alternar en la configuración de DevTools en la sección "Elementos". Desmarque "Mostrar DOM sombra del agente de usuario". Esto al menos ocultará cualquier Shadow DOM creado internamente (como elementos seleccionados). No estoy seguro de inmediato si afecta a los creados por el usuario, como los elementos personalizados.

Estos también aparecen en cosas como iframes, donde tiene un árbol DOM separado anidado dentro de otro.

Shadow DOM simplemente está diciendo que una parte de la página tiene su propio DOM dentro de ella. Los estilos y las secuencias de comandos pueden tener un alcance dentro de ese elemento, por lo que lo que se ejecuta en él solo se ejecuta en ese límite.

Esta es una de las piezas principales necesarias para que los componentes web funcionen. Se trata de una nueva tecnología que permite a los desarrolladores crear sus propios componentes encapsulados que los desarrolladores pueden usar como cualquier otro elemento HTML.

Garbee
fuente
Entonces, esa es una pregunta obvia de cómo usar esos elementos personalizados o componentes web creados para cualquier proyecto. Digamos que estoy usando polímero ...
Kushal Jayswal
62

Como ejemplo de Shadow DOM, cuando tiene una <video>etiqueta en una página web, se muestra como una sola etiqueta en el DOM principal, pero si habilita Shadow DOM, podrá ver el HTML del reproductor de video (player DOM).

DOM de sombra

Esto se explica acertadamente en este artículo, http://webcomponents.org/articles/introduction-to-shadow-dom/

Nagendra Rao
fuente
Recibo una advertencia de seguridad de Firefox cuando sigo el enlace webcomponents.org, algún tipo de problema de certificado.
Sebastian Norr
1
Sí, parece que su certificado SSL necesita renovación. Aún puede ver el sitio ignorando la advertencia.
Nagendra Rao
5

En el caso de los componentes web, existe un problema fundamental que dificulta el uso de los widgets creados con HTML y JavaScript.

Problema : el árbol DOM dentro de un widget no está encapsulado del resto de la página. Esta falta de encapsulación significa que la hoja de estilo de su documento podría aplicarse accidentalmente a partes dentro del widget; su JavaScript podría modificar accidentalmente partes dentro del widget; sus ID pueden superponerse con los ID dentro del widget y así sucesivamente.

Shadow DOM aborda el problema de encapsulación del árbol DOM .

Por ejemplo, si tuvieras un marcado como este:

<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>

entonces en lugar de

Hello, world!

tu página se ve como

こんにちは、影の世界!

No solo eso, si JavaScript en la página pregunta cuál es el textContent del botón, no lo obtendrá “こんにちは、影の世界!”, sino “Hello, world!” porque el subárbol DOM debajo de la raíz sombra está encapsulado .

NOTA : He recogido el contenido anterior de https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/, ya que me ayudó a entender Shadow DOM un poco mejor que las respuestas que ya están aquí. He agregado contenido relevante aquí para que ayude a otros, pero eche un vistazo al enlace para una discusión detallada sobre el mismo.

Aniket Thakur
fuente