Usando template com renderização em JavaScript

O elemento <template> contém HTML que não é renderizado até ser clonado e inserido pelo JavaScript. Seu conteúdo é inerte — os scripts não são executados, as imagens não são carregadas e os estilos não são aplicados — até que o modelo seja ativado.

O conteúdo do modelo reside em um DocumentFragment em template.content. Para usá-lo, clone o fragmento: const clone = template.content.cloneNode(true). O argumento true realiza uma clonagem profunda, incluindo todos os nós descendentes.

Personalize o clone antes de inseri-lo: faça uma consulta dentro do clone, defina o conteúdo de texto e adicione ouvintes de eventos. Em seguida, anexe-o ao DOM: container.appendChild(clone). Cada cloneNode() cria uma cópia independente — modifique uma sem afetar as outras.

Combine modelos com Array.forEach ou Array.map para renderizar listas: para cada item nos dados, clone o modelo, preencha os valores e anexe o item a um container de lista. Esse padrão é semelhante ao de um framework, mas é construído com HTML e JavaScript padrão.

Defina um <template> contendo um <tr> com células. Clone e preencha o modelo para cada linha de dados. Isso evita a concatenação de strings para gerar HTML — nenhum escape é necessário, pois você define textContent em vez de innerHTML.

Os modelos nunca são renderizados automaticamente. Isso os torna seguros para armazenar fragmentos que serão renderizados condicionalmente: mostre um modelo de "nenhum resultado" somente quando a busca não retornar nada, um modelo de erro somente em caso de falha de rede e um esqueleto de carregamento durante a busca de dados.

Um modelo pode conter outros modelos — os modelos aninhados permanecem inertes dentro do DocumentFragment do modelo externo. Isso permite hierarquias semelhantes às de componentes, nas quais um modelo externo clona e depois ativa os modelos internos conforme necessário.

Os estilos dentro da tag <style> de um modelo não são aplicados ao documento — permanecem inertes até que o modelo seja instanciado e seu conteúdo seja movido para o DOM ativo. Isso permite que os modelos carreguem seus próprios estilos sem poluir a página.

A análise de innerHTML é um processamento síncrono de strings HTML — o HTML é analisado novamente a cada vez. template.cloneNode() copia uma árvore já analisada. Para renderizar repetidamente a mesma estrutura, clonar o modelo é mais rápido e evita riscos de XSS causados pela concatenação de strings.

O elemento de modelo não possui vinculação de dados integrada — você precisa consultar e preencher manualmente cada clone. Para necessidades complexas de vinculação de dados, um framework ou uma biblioteca é mais apropriado. Os modelos são destinados a padrões simples de renderização manual, sem a sobrecarga de um framework.

O elemento de modelo é compatível com todos os navegadores modernos (o IE11 tinha suporte parcial). Para ambientes que exigem suporte ao IE, use um polyfill que analise o conteúdo do modelo durante a inicialização. Em projetos modernos, use o modelo sem polyfill.

Por que template.content.cloneNode(true) é preferível a innerHTML para renderização repetida?

O elemento de modelo contém fragmentos de HTML inertes e previamente analisados. Clonar template.content cria instâncias independentes para a vinculação manual de dados. Com a atribuição de textContent (sem XSS), os modelos permitem renderização de listas semelhante à de frameworks, interfaces condicionais e padrões de HTML reutilizáveis usando apenas APIs padrão do navegador.