O que é raiz de sombra

99

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.

html google-chrome dom google-chrome-devtools Andrew
fonte

Respostas:

97

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.

Garbee
fonte
Portanto, essa é uma questão óbvia de como usar esses elementos personalizados ou componentes da web criados para qualquer projeto? Digamos que eu esteja usando o Polymer ...
Kushal Jayswal
62

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).

Shadow DOM

Isso é explicado apropriadamente neste artigo, http://webcomponents.org/articles/introduction-to-shadow-dom/

Nagendra Rao
fonte
Recebo um aviso de segurança do Firefox quando sigo o link webcomponents.org, algum tipo de problema de certificado.
Sebastian Norr
1
Sim, parece que o certificado SSL deles precisa ser renovado. Você ainda pode visualizar o site ignorando o aviso.
Nagendra Rao
5

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.

Aniket Thakur
fonte