Nas Ferramentas do desenvolvedor do Google Chrome, vejo um #shadow-rootdireito sob a <html lang="en">tag. o que ele faz e para que é usado? Não vejo isso no Firefox nem no IE; apenas no Chrome, este é um recurso especial?
Se eu abri-lo, ele mostra <head>e <body>e um link ao lado chamado reveal, clicando, ele aponta para o <head>e <body>, nada mais.
Respostas:
Este é um indicador especial de que existe um Shadow DOM . Isso já existe há anos, mas os desenvolvedores nunca receberam APIs até recentemente. O Chrome já tem essa funcionalidade há algum tempo, outros navegadores ainda estão atualizando. Ele pode ser alternado nas Configurações do DevTools na seção "Elementos". Desmarque "Mostrar DOM Shadow do agente do usuário" Isso pelo menos esconderá quaisquer Shadow DOMs criados internamente (como elementos selecionados). Não tenho certeza se isso afeta os criados pelo usuário, como elementos personalizados.
Eles aparecem em coisas como iframes também, onde você tem uma árvore DOM separada aninhada dentro de outra.
O Shadow DOM está simplesmente dizendo que alguma parte da página tem seu próprio DOM dentro dela. Estilos e scripts podem ter o escopo desse elemento, então o que é executado nele só é executado naquele limite.
Esta é uma das principais peças necessárias para o funcionamento dos Web Components . Que é uma nova tecnologia que permite aos desenvolvedores construir seus próprios componentes encapsulados que os desenvolvedores podem usar como qualquer outro elemento HTML.
Como exemplo de Shadow DOM, quando você tem uma <video>tag em uma página da web, ela é mostrada como apenas uma tag no DOM principal, mas se você habilitar o Shadow DOM, poderá ver o HTML do player de vídeo (player DOM).
Isso é explicado apropriadamente neste artigo, http://webcomponents.org/articles/introduction-to-shadow-dom/
No caso de componentes da web, há um problema fundamental que torna os widgets construídos em HTML e JavaScript difíceis de usar.
Problema : a árvore DOM dentro de um widget não está encapsulada no resto da página. Essa falta de encapsulamento significa que a folha de estilo do documento pode ser aplicada acidentalmente às partes dentro do widget; seu JavaScript pode modificar acidentalmente partes dentro do widget; seus IDs podem se sobrepor aos IDs dentro do widget e assim por diante.
Shadow DOM aborda o problema de encapsulamento da árvore DOM .
Por exemplo, se você tivesse uma marcação como esta:
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>então em vez de
Hello, world!sua página parece
こんにちは、影の世界!Além disso, se o JavaScript na página perguntar o que é textContent do botão, ele não obterá “こんにちは、影の世界!”, mas “Hello, world!” porque a subárvore DOM sob a raiz de sombra está encapsulada .
NOTA : Eu peguei o conteúdo acima de https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ , pois me ajudou a entender o DOM da sombra um pouco melhor do que as respostas já aqui. Eu adicionei conteúdo relevante aqui para ajudar outras pessoas, mas dê uma olhada no link para uma discussão detalhada sobre o mesmo.