path: root/files/pt-br/web/html/element/template/index.html

---
title: <template>
slug: Web/HTML/Element/template
tags:
  - Componentes
  - Elemento
  - HTML
  - Referência(2)
  - Web
  - Web Componentes
translation_of: Web/HTML/Element/template
---
<h2 id="Summary" name="Summary">Sumário</h2>

<p><span class="seoSummary">O  elemento <strong><a href="/en-US/docs/Web/HTML">HTML</a> <code>&lt;template&gt;</code></strong> é 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.</span></p>

<p>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 <strong><code>&lt;template&gt;</code> </strong>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.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Conteúdo de categorias</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, script-supporting element</td>
  </tr>
  <tr>
   <th scope="row">Conteúdo Permitido</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content, </a>qualquer conteúdo HTML válido que é permitido para ocorrer dentro do {{HTMLElement("ol")}}, {{HTMLElement("dl")}}, {{HTMLElement("figure")}}, {{HTMLElement("ruby")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}, {{HTMLElement("audio")}}, {{HTMLElement("table")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("select")}}, {{HTMLElement("details")}} elemento e {{HTMLElement("menu")}} cujo tipo de atributo está em estado de menu de contexto.</td>
  </tr>
  <tr>
   <th scope="row">Tags omitidas</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elementos pais permitidos</th>
   <td>{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}} and {{HTMLElement("colgroup")}} sem um atributo <code>span</code></td>
  </tr>
  <tr>
   <th scope="row">Interface do DOM</th>
   <td>{{domxref("HTMLTemplateElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">Atributos</h2>

<p>Esse elemento inclui os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</p>

<p>Há também um atributo <em>content, </em>o qual é <em>read-only </em>e provê acesso ao conteúdo do template. A existência desse atributo <em>content</em> é frequentemente usada como um modo de determinar se o navegador do usuário suporta o element <strong style="line-height: 1.5;"><code>&lt;template&gt;</code></strong><span style="line-height: 1.5;">.</span></p>

<h2 id="Example" name="Example">Exemplo</h2>

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

<pre class="brush: html">&lt;table id="producttable"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;td&gt;UPC_Code&lt;/td&gt;
      &lt;td&gt;Product_Name&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;!-- existing data could optionally be included here --&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;template id="productrow"&gt;
  &lt;tr&gt;
    &lt;td class="record"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/template&gt;
</pre>

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

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

<pre class="brush:js;">// Teste se seu navegador suporta o <em>template</em> HTML checando
// a presença do atribute content no elemento <em>template</em> .
if ('content' in document.createElement('template')) {

  // Instancie a tabela com o HTML <em>tbody</em> e a <em>row</em> com o template
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clone a nova <em>row</em> e insira-a na tabela
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);

  // Crie uma nova <em>row</em>
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clone a nova <em>row</em> e insira-a na tabela
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} else {
  // Ache outro modo de adicionar as <em>rows</em> na tabela, pois
  // o elemento HTML <em>template </em>não é suportado.
}
</pre>

<p>O resultado é a tabela original do HTML, com duas novas linhas inseridas via Javascript:</p>

<div class="hidden">
<pre class="brush: css">table {
  background: #000;
}
table td {
  background: #fff;
}</pre>
</div>

<p>{{EmbedLiveSample("Example", 500, 120)}}</p>

<h2 id="Specifications" name="Specifications">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Sem mudanças</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Definição Inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de Navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>26</td>
   <td>{{CompatGeckoDesktop("22")}}</td>
   <td>Edge 13</td>
   <td>15</td>
   <td>7.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>iOS 8</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Veja também</h2>

<ul>
 <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}</li>
</ul>

<div>{{HTMLRef}}</div>