Sumário

O elementoHTML<template> é um mecanismo para encapsular um conteúdo do lado do cliente que não é renderizado quando a página é carregada, mas que pode ser instanciado posteriormente em tempo de execução usando JavaScript.

Pense no template como um fragmento de conteúdo, que é armazenado para um possível uso futuro no documento. Enquanto o parser processa o conteúdo do elemento<template> ao carregar a página, isso apenas garante que o conteúdo é válido; porém, o conteúdo do elemento ainda não foi renderizado.

Atributos

Esse elemento inclui osatributos globais.

Há também um atributocontent, o qual éread-only e provê acesso ao conteúdo do template. A existência desse atributocontent é frequentemente usada como um modo de determinar se o navegador do usuário suporta o element<template>.

Exemplo

Primeiro, nós começamos com um pedaço de HTML como exemplo:

<table>  <thead>    <tr>      <td>UPC_Code</td>      <td>Product_Name</td>    </tr>  </thead>  <tbody>    <!-- existing data could optionally be included here -->  </tbody></table><template>  <tr>    <td></td>    <td></td>  </tr></template>

No início, nós temos uma tabela que irá receber conteúdo inserido via Javascript. Em seguida, vem otemplate, que descreve a estrutura de um fragmento de HTML que representa uma única linha da tabela.

Agora que a tabela foi criada e otemplate definido, nós usamos JavaScript para inserir linhas na tabela, cada linha é construída usando otemplate como base.

// Teste se seu navegador suporta o template HTML checando// a presença do atribute content no elemento template .if ("content" in document.createElement("template")) {  // Instancie a tabela com o HTML tbody e a row com o template  var t = document.querySelector("#productrow"),    td = t.content.querySelectorAll("td");  td[0].textContent = "1235646565";  td[1].textContent = "Stuff";  // Clone a nova row e insira-a na tabela  var tb = document.getElementsByTagName("tbody");  var clone = document.importNode(t.content, true);  tb[0].appendChild(clone);  // Crie uma nova row  td[0].textContent = "0384928528";  td[1].textContent = "Acme Kidney Beans";  // Clone a nova row e insira-a na tabela  var clone2 = document.importNode(t.content, true);  tb[0].appendChild(clone2);} else {  // Ache outro modo de adicionar as rows na tabela, pois  // o elemento HTML template não é suportado.}

O resultado é a tabela original do HTML, com duas novas linhas inseridas via #"especificações" >

Especificações

Compatibilidade de Navegadores

Veja também

• Web components:<content>,<shadow>