Elementos slot para distribuição de conteúdo
Projete o conteúdo do hospedeiro no DOM de sombra com slots nomeados e padrão.
Elementos slot para distribuição de conteúdo é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 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 HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
DOM leve versus DOM de sombra
Os filhos escritos dentro de um elemento personalizado no HTML formam o "DOM leve" do elemento — eles não estão na árvore de sombra. Por padrão, o navegador não os renderiza; a árvore de sombra precisa solicitá-los explicitamente por meio de <slot>.
O slot padrão
Um elemento <slot> dentro da árvore de sombra marca o local onde os filhos do DOM leve devem aparecer. Sem um nome, ele é o slot padrão e aceita qualquer filho direto do elemento hospedeiro.
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>Slots nomeados
Vários slots podem ser identificados por nome. A sombra declara <slot name="header">; o usuário opta por ele com <h1 slot="header">. Os filhos com um atributo slot correspondente preenchem esse slot; os filhos sem correspondência vão para o slot padrão.
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>Conteúdo alternativo do slot
O conteúdo entre as tags do slot é renderizado somente quando nada é atribuído a esse slot: <slot>No content provided</slot>. Use-o para exibir texto de espaço reservado ou instruções em slots vazios.
Herança de estilos entre slots
Os filhos inseridos em slots continuam no DOM leve e herdam estilos do documento principal, não da árvore de sombra. Use o pseudo-elemento ::slotted() de dentro da sombra para estiliza-los: ::slotted(p) { color: red; }.
Limitações de ::slotted
::slotted() só pode selecionar filhos diretos do elemento hospedeiro (os elementos realmente distribuídos no slot). Ele não pode selecionar os descendentes desses filhos. Para estilos mais profundos, exponha propriedades personalizadas de CSS ou use ::part nos elementos internos da sombra.
Detectando alterações nos slots
Cada slot dispara um evento slotchange quando seus nodes atribuídos mudam. Escute esse evento para reagir a atualizações dinâmicas de conteúdo: slot.addEventListener("slotchange", handler). Isso é útil para componentes cujo layout depende dos filhos presentes.
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes e assignedElements
slot.assignedNodes() retorna todos os nodes atribuídos a um slot (incluindo nodes de texto). slot.assignedElements() retorna apenas os filhos Element — geralmente, os que você deseja ao percorrer programaticamente o conteúdo inserido em slots.
Distribuindo filhos
O navegador cuida automaticamente de toda a distribuição com base no atributo slot de cada filho. Não há nenhuma etapa de JavaScript — escreva <span slot="footer">...</span> nos filhos do DOM leve do hospedeiro, e o slot correspondente da sombra o conterá.
Slots e estilização do elemento hospedeiro
Os estilos próprios do elemento hospedeiro (definidos em <my-card> no documento) entram em cascata nos filhos do DOM leve, incluindo os que acabam inseridos em slots. O CSS da sombra por meio de ::slotted tem especificidade maior que os estilos herdados do hospedeiro quando ambos visam a mesma propriedade.
Casos de uso comuns
Cards com slots para cabeçalho, corpo e rodapé; diálogos com slots para título, conteúdo e ações; itens de lista com slots para conteúdo inicial e final; menus de navegação com slots para itens. Os slots tornam os elementos personalizados combináveis, assim como <details>/<summary> ou <table>/<tr>.
Verificação de conhecimento
Qual é a diferença entre o slot padrão e um slot nomeado?
Resumo
Os slots projetam os filhos do DOM leve em locais específicos da árvore de sombra. O slot padrão aceita qualquer filho sem nome; os slots nomeados aceitam filhos com atributos slot correspondentes. O conteúdo alternativo preenche slots vazios, ::slotted estiliza filhos diretos inseridos em slots, e os eventos slotchange permitem reagir a atualizações dinâmicas de conteúdo.
Perguntas Frequentes
A aula “Elementos slot para distribuição de conteúdo” é grátis?
Sim — o texto completo de “Elementos slot para distribuição de conteúdo” é 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 HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Elementos slot para distribuição de conteúdo”?
Projete o conteúdo do hospedeiro no DOM de sombra com slots nomeados e padrão. Você pratica HTML 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 HTML Academy?
Nenhuma experiência prévia é necessária. HTML 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 2 de 4.
Quanto tempo leva a aula “Elementos slot para distribuição de conteúdo”?
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 HTML Academy?
Sim. Cada aula de HTML 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
- attachShadow e raiz de sombra
- Elementos slot para distribuição de conteúdo
- Estilos com escopo dentro do DOM de sombra
- Part e Exportparts para estilização externa