O que é Shadow DOM?

Este artigo explica o que é Shadow DOM.

YouTube Video

Entendendo o Shadow DOM

Shadow DOM é uma funcionalidade poderosa do padrão Web Components que permite a encapsulação de estilos e da estrutura DOM dentro dos componentes. Essa funcionalidade impede a interferência de estilos e scripts entre os componentes e o documento principal.

O que é Shadow DOM?

Shadow DOM oferece uma maneira de criar uma árvore DOM com escopo associada a um elemento DOM regular. Essa árvore de sombra é isolada do documento geral, onde estilos e scripts externos não a influenciam, nem seus estilos e scripts internos vazam para fora.

Por exemplo, se você criar um componente de botão personalizado usando Shadow DOM, seus estilos não interferirão com outros elementos na página. Da mesma forma, elementos com o mesmo nome de classe não entrarão em conflito.

Benefícios do Shadow DOM

1. Encapsulamento: O Shadow DOM separa estilos e funcionalidades, evitando conflitos com estilos e scripts globais.

2. Reutilização: Componentes construídos com Shadow DOM podem ser reutilizados em diferentes projetos sem se preocupar com conflitos de estilo.

3. Manutenibilidade: O encapsulamento permite que os componentes sejam autossuficientes em termos de lógica e estilos, tornando mais fácil a depuração e manutenção.

Criando o Shadow DOM

Para usar o Shadow DOM, você precisa anexar uma raiz de sombra a um elemento HTML. Aqui está um exemplo simples:.

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

Explicação

1. Elemento Hospedeiro: Um elemento DOM regular ao qual a raiz de sombra está anexada (neste caso, #shadow-host).

2. Raiz de Sombra: É a raiz da árvore de sombra criada usando attachShadow.

3. Modo: No modo open, JavaScript externo pode acessar a raiz de sombra através de element.shadowRoot. Por outro lado, o modo closed não permite acesso.

Estilizando dentro do Shadow DOM

O Shadow DOM possui seu próprio escopo de estilo. Os estilos definidos dentro da árvore do Shadow aplicam-se apenas aos elementos dentro dessa árvore. Aqui está um exemplo:.

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

Mesmo que haja estilos conflitantes no documento principal, os parágrafos dentro da árvore do Shadow permanecem inalterados:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

Os parágrafos dentro do Shadow DOM permanecem verdes, enquanto os parágrafos externos são vermelhos.

Eventos dentro do Shadow DOM

Eventos dentro do Shadow DOM são semelhantes aos eventos regulares do DOM, mas podem se comportar de maneira diferente em termos de propagação devido à encapsulação. Eventos que ocorrem dentro da árvore do Shadow podem se propagar até o elemento hospedeiro, mas não se propagam diretamente para o documento inteiro.

Aqui está um exemplo:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

Quando o botão é clicado, ambos os ouvintes são acionados, demonstrando o comportamento de propagação de eventos.

Slots: Distribuição de conteúdo do Light DOM

Os slots permitem projetar conteúdo do Light DOM para o Shadow DOM. Aqui está um exemplo:.

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

No documento principal, você pode fazer o seguinte:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

Os elementos slot dentro do Shadow DOM exibem o conteúdo do Light DOM com o atributo slot correspondente.

Conclusão

O Shadow DOM é uma ferramenta essencial para construir componentes web robustos, reutilizáveis e de fácil manutenção. Ao encapsular estilos e funcionalidades, ele reduz o potencial de conflitos e simplifica a gestão do código.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video