<template>
==========

Sumário
-------

O elemento **HTML `<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.

|  |  |
| --- | --- |
| Conteúdo de categorias | Metadata content,
 flow content,
 phrasing content, script-supporting element
  |
| Conteúdo Permitido | Metadata content,
 flow content, qualquer conteúdo HTML válido que é permitido para ocorrer dentro do
 `<ol>`, `<dl>`,
 `<figure>`, `<ruby>`,
 `<object>` (en-US), `<video>`,
 `<audio>`, `<table>`,
 `<colgroup>` (en-US), `<thead>` (en-US),
 `<tbody>` (en-US), `<tfoot>`,
 `<tr>` (en-US), `<fieldset>`,
 `<select>`, `<details>`
 elemento e `<menu>` (en-US) cujo tipo de atributo está
 em estado de menu de contexto.
  |
| Tags omitidas | None, both the starting and ending tag are mandatory. |
| Elementos pais permitidos | `<body>`, `<frameset>` (en-US),
 `<head>` and
 `<colgroup>` (en-US) sem um atributo `span` |
| Interface do DOM | `HTMLTemplateElement` (en-US) |

Atributos
---------

Esse elemento inclui os atributos globais.

Há também um atributo *content,* o qual é *read-only* e provê acesso ao conteúdo do template. A existência desse atributo *content* é 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:


```html
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
```


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

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


```js
// 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 Javascript:
```

table {
  background: #000;
}
table td {
  background: #fff;
}
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # the-template-element |

Compatibilidade de Navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Web components: `<content>` (en-US), `<shadow>`