<slot>: O Elemento SLOT
Última atualização: 2026-10-13
<slot>O Elemento SLOT
Define um «slot» em um shadow DOM para Web Components — um espaço reservado onde o conteúdo do host é projetado; name permite distribuição nomeada.
| Categoria | Scripts e Incorporação |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </slot> tag |
| Status | Padrão |
📝 Sintaxe
<slot name="title"></slot>⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
name | Slot name; host content with slot="name" fills it; omitted is the default slot. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <slot> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： slot só funciona dentro de shadow DOM / Web Components; em uma página normal não tem efeito de distribuição.
❓ Perguntas Frequentes
QPara que serve slot?
A
<slot> é o «espaço reservado» dos Web Components: um buraco cavado no Shadow DOM do componente personalizado, preenchido com o conteúdo real de quem usa o componente. Por exemplo, <slot name='title'> corresponde ao conteúdo com slot='title' do consumidor, separando conteúdo da estrutura do componente.QO que aparece quando slot não é preenchido?
AO conteúdo de fallback dentro do slot: o que está escrito entre as tags
<slot>Texto padrão</slot> só é renderizado quando o consumidor não fornece o conteúdo correspondente. Isso dá ao componente um estado padrão razoável.Qslot precisa ser usado junto com template?
ANormalmente sim —
<template> define a estrutura do Shadow DOM e os slots são cavados ali; mas slots também funcionam em shadow roots criados via JS. No sentido inverso, template usado sozinho (template no cliente) dispensa slot. São parceiros com papéis distintos no sistema de Web Components.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
