React – O que é Shadow DOM

React – O que é Shadow DOM

14 de outubro de 2017 1 Por Ramos de Souza Janones
Powered by Rock Convert

shadow DOM, ou shadow tree, é uma árvore de nós HTML assim como qualquer outra árvore que já conhecemos (a light tree), mas que é anexada a um elemento específico da light tree, não ao documento em si. Ou seja, é criado um novo contexto de nós em que todos os nós pertencentes à shadow tree não interagem diretamente com os nós do documento. Esta regra é válida também para o CSS (aparentemente o JavaScript não é encapsulado), ou seja, você pode definir regras no CSS utilizando ids e classes normalmente, que tais regras se aplicarão apenas ao contexto da shadow tree e não se aplicarão ao documento em si.

Veja o exemplo abaixo. É criado uma shadow tree a partir do elemento template e anexado ao elemento #nameTag. Perceba que as definições de estilo da shadow tree não se aplicam aos elementos externos, presentes na light tree.

A classe .outer é definida tanto para um elemento na light tree quanto um elemento na shadow tree, porém, devido o encapsulamento das definições de estilo, apenas o elemento da shadow tree é estilizado.

var shadow = document.querySelector('#nameTag').createShadowRoot();
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
shadow.appendChild(clone);
<div class="outer">Stack Overflow em Português</div>
<div id="nameTag">Bob</div>

<template id="nameTagTemplate">
  <style>
  .outer { border: 2px solid brown; }
  </style>
  
  <div class="outer">
    <span class="boilerplate">
      Olá! Meu nome é
    </span>
    <span class="name">
      Bob
    </span>
  </div>
</template>

O conceito de shadow DOM faz parte dos quatro padrões de Web Component, junto com modelos HTMLelementos personalizados e importações de HTML.

Os outros três podem outras perguntas semelhantes a esta aqui no SOpt, acredito eu.

Terminologia

Aprenda React do Zero ao Profissional

Aprenda React do Zero ao Profissional

A composição do Shadow DOM introduz vários conceitos básicos novos no desenvolvimento da Web. Antes de entrarmos em detalhes, vamos padronizar a terminologia para falarmos o mesmo idioma.

Light DOM

A marcação escrita por um usuário do seu componente. Esse DOM reside fora do shadow DOM do componente. Ele consiste nos filhos reais do elemento.

<button is="better-button">
  <!-- the image and span are better-button's light DOM -->
  <img src="gear.svg" slot="icon">
  <span>Settings</span>
</button>

 

Shadow DOM

O DOM escrito pelo autor do componente. O Shadow DOM é local em relação ao componente e define sua estrutura interna e o CSS com escopo, bem como encapsula os detalhes da sua implementação. Além disso, ele define como renderizar marcação criada pelo consumidor do seu componente.

#shadow-root
  <style>...</style>
  <slot name="icon"></slot>
  <span id="wrapper">
    <slot>Button</slot>
  </span>

 

Curso completo de Games, inclusive Realidade Aumentada.Powered by Rock Convert

Árvore plana do DOM (plane tree)

O resultado da distribuição do light DOM do usuário pelo navegador no shadow DOM, renderizando o produto final. A árvore plana é o que você finalmente verá no DevTools e o que será renderizado na página.

<button is="better-button">
  #shadow-root
    <style>...</style>
    <slot name="icon">
      <img src="gear.svg" slot="icon">
    </slot>
    <slot>
      <span>Settings</span>
    </slot>
</button>

Posso Usar (Can I Use?)

Shadow DOM v0

Can i use? Shadow DOM v0

Shadow DOM v1

Can i use? Shadow DOM v1

Tenha mais informações sobre a compatibilidade de navegadores e polyfills aqui.


Fonte:

Powered by Rock Convert
Curso de Inglês para Programadores.Powered by Rock Convert

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.