O que é Shadow DOM?

Shadow DOM é um padrão web que permite encapsular HTML, CSS e JavaScript em blocos separados e isolados do documento principal.

Conceitos principais:

• Shadow Host: Elemento DOM ao qual o Shadow DOM é aplicado.
• Shadow Tree: Árvore DOM isolada.
• Shadow Boundary: Fronteira entre o Shadow DOM e o documento principal.
• Shadow Root: Nó raiz do Shadow Tree. Criado com element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root acessível de fora através de element.shadowRoot.
  • closed: Shadow Root não acessível de fora.

Vantagens:

• Encapsulamento de estilos: Os estilos definidos no Shadow DOM não vazam para fora e não afetam o documento principal. Os estilos do documento principal por padrão não afetam o Shadow DOM, mas isso pode ser controlado.
• Encapsulamento do DOM: Os elementos dentro do Shadow DOM não são visíveis na árvore DOM principal, o que previne interseções acidentais de seletores e manipulações.
• Encapsulamento de comportamento: A lógica e os manipuladores de eventos podem estar isolados no Shadow DOM.

Exemplo de criação de Shadow DOM:

// Criar um novo elemento DIV
const hostElement = document.createElement('div');
// Anexar Shadow DOM ao elemento
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Adicionar conteúdo ao Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Estilo aplicável apenas dentro deste Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Isto é um texto dentro do Shadow DOM</p>
`;

// Adicionar o elemento host ao documento principal
document.body.appendChild(hostElement);

Aplicações:

• Criação de componentes web reutilizáveis.
• Isolamento de estilos de bibliotecas externas.
• Proteção dos detalhes internos do componente contra interferências externas.

Características ao trabalhar com estilos:

• Estilos externos por padrão não afetam o Shadow DOM.
• Pode usar :host para estilizar o Shadow Host de dentro do Shadow DOM.
• Pode usar :host-context() para estilizar com base no contexto do Shadow Host.
• Pode usar ::slotted() pseudo-elemento para estilizar elementos colocados em slots (<slot>).

<my-component>
  <!-- Este elemento será "enviado" para o slot dentro do Shadow DOM -->
  <span>Conteúdo do slot</span>
</my-component>

// Dentro do Shadow DOM do componente my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Estilo para o elemento colocado no slot com nome "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Conteúdo principal do componente</div>
  <slot></slot> <!-- Aqui será exibido o conteúdo do slot -->
`;

Shadow DOM é parte da especificação de Web Components.