<template>: O Elemento TEMPLATE
Última atualização: 2026-10-13
<template>O Elemento TEMPLATE
Declara um fragmento HTML reutilizável que não é renderizado e cujos scripts não executam, até o JavaScript cloná-lo e inseri-lo.
| 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 </template> tag |
| Status | Padrão |
📝 Sintaxe
<template id="row">
<tr><td></td></tr>
</template>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <template> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： O conteúdo de template existe no DOM, mas é invisível e inerte; acesse via .content e depois cloneNode.
❓ Perguntas Frequentes
QO conteúdo de template é renderizado?
ANão. O conteúdo de
<template> é analisado no carregamento da página, mas não renderiza, não executa scripts e não carrega imagens — fica guardado num «fragmento de documento inerte». Só começa a renderizar depois de clonado e inserido no DOM via JS (content.cloneNode(true)); é a forma padrão de template no cliente.QQual é a diferença entre template e um div com display:none?
ANatures diferentes: o conteúdo com display:none continua sendo DOM vivo — scripts executam, imagens carregam, seletores o encontram; o conteúdo de
<template> é totalmente inerte, sem efeitos colaterais e inatingível por seletores comuns. Para guardar templates à espera de uso, template é obrigatório.Qtemplate suporta aninhamento?
ASuporta: um template pode conter outro template, e enquanto o externo não é ativado, o interno permanece inerte. Templates aninhados servem para construir estruturas de listas em vários níveis (lista dentro de lista), clonando e preenchendo camada a camada.
🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
