JavaScript Academy · Aula

Templates e slots

Componha componentes com template e slot.

Templates e slots é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 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 elemento modelo

O elemento <template> contém HTML inerte que é analisado, mas não renderizado. Seu conteúdo permanece fora da página até que você o clone e insira, o que o torna ideal para marcações reutilizáveis.

Acessando o conteúdo do modelo

Os elementos filhos de um modelo ficam na propriedade .content, um DocumentFragment. Os scripts, as imagens e os estilos dentro dele não são executados nem carregados até serem inseridos.

// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment

Clonando um modelo

Use importNode ou cloneNode(true) para copiar o conteúdo do modelo e, em seguida, insira o clone. A clonagem permite criar muitas cópias com baixo custo.

const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);

Modelos dentro de componentes

Os elementos personalizados geralmente definem um modelo uma vez e o clonam na raiz de sombra de cada instância. Isso é mais rápido do que analisar novamente uma cadeia de caracteres HTML a cada vez.

const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';

class MyCard extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.appendChild(tpl.content.cloneNode(true));
  }
}
customElements.define('my-card', MyCard);

O que é um slot

Um <slot> é um espaço reservado dentro de uma árvore de sombra onde o conteúdo filho do próprio elemento, o DOM leve, é projetado. Isso permite que os usuários passem conteúdo personalizado para o seu componente.

// Shadow root markup:
// <div class="box"><slot></slot></div>

// Usage:
// <my-card>This text fills the slot</my-card>

Conteúdo padrão do slot

O conteúdo colocado entre as etiquetas <slot> funciona como conteúdo alternativo. Ele é exibido apenas quando o usuário não fornece conteúdo correspondente.

// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.

Slots nomeados

Vários slots podem coexistir usando o atributo name. Os elementos filhos do DOM leve são direcionados a um slot com o atributo slot.

// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>

// Usage:
// <my-card>
//   <h2 slot="title">Hello</h2>
//   <p slot="body">World</p>
// </my-card>

O slot padrão (sem nome)

Um slot sem name é o slot padrão. Qualquer elemento filho sem um atributo slot é projetado nele. Você pode combinar um slot padrão com vários slots nomeados.

// <slot name="header"></slot>
// <slot></slot>  <!-- default: catches everything else -->

Estilizando conteúdo projetado

Use o pseudo-elemento ::slotted() para estilizar os elementos filhos projetados a partir dos estilos de sombra. Ele corresponde apenas a nós projetados de nível superior.

// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }

O evento slotchange

Um slot dispara um evento slotchange quando seus nós atribuídos são alterados. Escute esse evento para reagir quando os usuários adicionarem ou removerem conteúdo projetado.

const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
  const nodes = slot.assignedNodes();
  console.log('slot now has', nodes.length, 'nodes');
});

Modelos e slots juntos

Os modelos definem a estrutura uma vez; os slots tornam essa estrutura flexível ao permitir que os consumidores injetem seu próprio conteúdo. Juntos, eles dão suporte a componentes Web limpos, reutilizáveis e personalizáveis.

Verificação rápida

Teste sua compreensão sobre modelos e slots.

Recapitulação

Você aprendeu sobre modelos e slots:

<template> contém marcação inerte e reutilizável em .content.
Clone com cloneNode(true) antes de inserir.
<slot> projeta o DOM leve na árvore de sombra.
Os slots nomeados usam name junto com o atributo slot do elemento filho.
::slotted() estiliza nós projetados; slotchange reage às atualizações.

Você concluiu os componentes Web. Em seguida, veremos a API de observação de interseções.

Perguntas Frequentes

A aula “Templates e slots” é grátis?

Sim — o texto completo de “Templates e slots” é 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 “Templates e slots”?

Componha componentes com template e slot. 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 4 de 4.

Quanto tempo leva a aula “Templates e slots”?

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