O que é Shadow DOM?

Shadow DOM — é um padrão web que permite encapsular a árvore DOM e estilos dentro de um componente, isolando-os do resto do documento.

Conceitos principais:

• Shadow tree: Árvore DOM própria, anexada a um elemento.
• Shadow boundary: Fronteira que separa o Shadow DOM do documento principal.
• Shadow host: Elemento ao qual o Shadow DOM está anexado.
• Shadow root: Nó raiz do Shadow tree.

Vantagens:

• Isolamento de estilos: Os estilos definidos dentro do Shadow DOM não afetam os elementos fora dele, e vice-versa.
• Isolamento do DOM: A estrutura DOM dentro do Shadow DOM não é visível nem acessível diretamente do documento principal, o que previne conflitos de id e classes.
• Encapsulamento: Cria componentes modulares e reutilizáveis.

Criação do Shadow DOM:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // mode: 'open' - acessível via JavaScript; 'closed' - não

shadowRoot.innerHTML = `
  <style>
    /* Estilos apenas para este Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Isto é o conteúdo do Shadow DOM</p>
`;