Slots padrão para projeção de conteúdo
Coloque um elemento dentro de um componente para aceitar qualquer conteúdo filho.
Slots padrão para projeção de conteúdo é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 1 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 Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
O que são as áreas de inserção
As áreas de inserção permitem que os componentes pai insiram marcação em locais específicos de um componente filho.
O elemento de inserção
Dentro de um componente filho, coloque uma tag <slot /> onde o conteúdo deve aparecer.
<!-- Card.svelte -->
<div class="card">
<slot />
</div>Usar a partir do pai
Coloque os elementos filhos entre as tags do componente. Eles aparecerão onde estiver a área de inserção.
<Card>
<p>Hello inside the card!</p>
</Card>Poder da composição
Esse padrão permite criar estruturas de layout reutilizáveis, como cartões, janelas modais e páginas.
Vários elementos filhos
Qualquer número de elementos pode preencher a área de inserção padrão.
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>Strings simples
Você também pode passar texto simples como conteúdo da área de inserção.
<Button>Click me</Button>Conteúdo condicional
Use {#if} dentro do componente pai para escolher o que inserir.
Áreas de inserção de componentes
O conteúdo inserido pode incluir livremente outros componentes.
<Card>
<Avatar />
<Username />
</Card>Estilização
O conteúdo inserido mantém os estilos do componente pai que o escreveu, não do componente filho.
Estrutura versus lógica
As áreas de inserção são uma ferramenta de estrutura e composição, não um mecanismo para passar dados. Use propriedades para os dados.
Pontos de inserção
Você pode ter vários pontos de inserção em um componente (padrão e nomeados).
Verificação rápida
Onde aparece o conteúdo inserido?
Recapitulação
Use <slot /> em um componente filho e passe os elementos filhos entre as tags do componente pai para inserir conteúdo.
Perguntas Frequentes
A aula “Slots padrão para projeção de conteúdo” é grátis?
Sim — o texto completo de “Slots padrão para projeçã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 Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Slots padrão para projeção de conteúdo”?
Coloque um elemento dentro de um componente para aceitar qualquer conteúdo filho. Você pratica Sveltejs 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 Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs 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 1 de 4.
Quanto tempo leva a aula “Slots padrão para projeçã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 Sveltejs Academy?
Sim. Cada aula de Sveltejs 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
- Slots padrão para projeção de conteúdo
- Slots nomeados com slot="name"
- Conteúdo de fallback de Slot
- Verificando o conteúdo de Slots com $$slots