JavaScript Academy · Aula

Shadow DOM e encapsulamento

Isole estilos e marcação em raízes shadow.

Shadow DOM e encapsulamento é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

O que é o DOM de sombra

O DOM de sombra fornece a um elemento uma árvore DOM privada e encapsulada. A marcação e os estilos dentro dela ficam isolados do restante da página.

O CSS externo não entra.
O CSS interno não sai.
A estrutura interna fica oculta para consultas DOM comuns.

attachShadow

Você cria uma árvore de sombra chamando this.attachShadow({ mode: 'open' }). Isso retorna uma raiz de sombra que você preenche como um nó comum.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

Modo aberto vs. fechado

A opção mode controla o acesso externo:

'open' — a raiz pode ser acessada por element.shadowRoot.
'closed' — element.shadowRoot retorna null; apenas seu código mantém a referência.

A maioria dos componentes usa 'open' para facilitar a depuração.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Preenchendo a raiz de sombra

Defina shadowRoot.innerHTML para construir o conteúdo encapsulado. Essa marcação fica invisível para document.querySelector.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

Estilos com escopo

Uma etiqueta style dentro da raiz de sombra afeta apenas essa raiz. O mesmo seletor fora do componente não é afetado, e os estilos da página não entram.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

O seletor :host

Dentro dos estilos de sombra, :host seleciona o próprio elemento personalizado, que é o anfitrião da árvore de sombra. Use-o para estilizar o box externo do componente.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

Isolamento de estilos na prática

O encapsulamento faz com que os autores de componentes e os autores de páginas deixem de disputar nomes de classes. Uma regra .title dentro de um componente nunca afeta um .title em outro lugar.

Nenhum conflito de CSS global.
Seletores simples e genéricos voltam a ser seguros.

Consultando dentro da raiz de sombra

Para acessar nós internos, faça a consulta na raiz de sombra, não no documento. A raiz de sombra oferece os mesmos métodos de consulta.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

Os eventos atravessam o limite

Muitos eventos, como click, se propagam para fora do DOM de sombra, mas são redirecionados para que os ouvintes externos vejam o elemento anfitrião, não o nó interno. Isso preserva o encapsulamento.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

Estilos herdáveis

Algumas propriedades CSS, como color e font-family, são herdadas através do limite da árvore de sombra porque a herança flui pela árvore composta. Você pode adotar a aparência da página contando com a herança ou usando propriedades personalizadas de CSS.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Quando usar o DOM de sombra

Use o DOM de sombra quando precisar de um isolamento forte de estilos e marcação para um componente reutilizável. Evite-o quando quiser que o componente herde e participe livremente dos estilos globais da página.

Verificação rápida

Teste sua compreensão sobre o DOM de sombra.

Recapitulação

Você aprendeu sobre o DOM de sombra:

attachShadow({ mode }) cria uma árvore isolada.
'open' expõe shadowRoot; 'closed' o oculta.
As etiquetas style internas têm escopo; :host estiliza o próprio elemento.
As consultas são executadas na raiz de sombra, não no documento.
Os eventos são redirecionados para preservar o encapsulamento.

Em seguida, vamos reutilizar a marcação com modelos e slots.

Perguntas Frequentes

A aula “Shadow DOM e encapsulamento” é grátis?

Sim — o texto completo de “Shadow DOM e encapsulamento” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Shadow DOM e encapsulamento”?

Isole estilos e marcação em raízes shadow. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Shadow DOM e encapsulamento”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy