Pregunta Qué es la raíz de sombra


En las herramientas de desarrollo de Google Chrome, veo una #shadow-root justo debajo <html lang="en"> etiqueta. ¿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 llamado reveal, al hacer clic, apunta a la <head> y <body>, nada más.


74
2017-12-06 16:15


origen


Respuestas:


Este es un indicador especial de que Shadow DOM existe Han existido durante años, pero los desarrolladores nunca recibieron APIs 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". Desmarca la casilla "Mostrar DOM de agente de usuario". Esto ocultará al menos cualquier DOM de sombra creado internamente (como elementos seleccionados). No estoy seguro de inmediato si afecta los creados por el usuario, como los elementos personalizados.

También aparecen en iframes, donde tienes un árbol DOM independiente anidado dentro de otro.

El DOM de Shadow simplemente dice que una parte de la página tiene su propio DOM dentro de él. Los estilos y las secuencias de comandos se pueden delimitar 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 Componentes web trabajar. Que es una nueva tecnología que permite a los desarrolladores construir sus propios componentes encapsulados que los desarrolladores pueden usar como cualquier otro elemento HTML.


78
2017-12-06 16:27



Como ejemplo de Shadow DOM, cuando tienes un <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 (jugador DOM).


Shadow DOM


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


54
2017-10-13 15:01