React – O que é Shadow DOM?

React – O que é Shadow DOM?

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

O que é Shadow DOM? Uma explicação baseado em exemplos com os fontes utilizando o Framework React, de forma passo a passo.

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:

» Mundo JavaScript » React 

React Native Do Zero Ao Profissional: crie apps para Android e IOSPowered by Rock Convert
Siga os bons!

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.

Últimos posts por Ramos de Souza Janones (exibir todos)




Frontend Do Zero Ao Profissional