O que é Shadow DOM?

Shadow DOM é um padrão web que permite encapsular o DOM e CSS dentro de um componente. Ele cria uma árvore DOM separada e isolada, chamada de "árvore de sombra" (shadow tree), que é anexada a um elemento no documento principal, chamado de "raiz de sombra" (shadow root).

Vantagens do Shadow DOM:

• Isolamento de CSS: Os estilos definidos dentro do Shadow DOM não "escapam" para fora, afetando o documento principal, e por padrão, os estilos do documento principal não afetam o Shadow DOM.
• Isolamento do DOM: A estrutura do Shadow DOM está oculta do documento principal e não é acessível através de métodos padrão de seleção (por exemplo, querySelector).
• Isolamento de JavaScript: Os scripts que executam no documento principal não podem acessar facilmente os elementos dentro do Shadow DOM.
• Reutilização: Os componentes criados com Shadow DOM podem ser facilmente utilizados em outras partes da aplicação ou até em outros sites.

Criação do Shadow DOM:

// Obtemos o elemento ao qual queremos anexar o Shadow DOM
const hostElement = document.getElementById('my-component');

// Criamos Shadow Root
// 'open' torna o Shadow DOM acessível de fora através de hostElement.shadowRoot
// 'closed' oculta o Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Adicionamos elementos dentro do Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Estilos específicos para este componente */
    h2 {
      color: blue;
    }
  </style>
  <h2>Título dentro do componente</h2>
  <p>Parágrafo dentro do componente.</p>
`;

Características:

• Slots: Permitem inserir conteúdo externo em locais específicos dentro do Shadow DOM.
• Partes de sombra (Shadow Parts): Permitem estilizar certos elementos dentro do Shadow DOM de fora.

O Shadow DOM é uma componente chave para criar componentes web (Web Components), fornecendo uma forte encapsulação necessária para criar elementos de UI reutilizáveis e autossuficientes.