initial commit

1 files changed, 198 insertions, 0 deletions

diff --git a/files/pt-br/web/html/element/template/index.html b/files/pt-br/web/html/element/template/index.html
new file mode 100644
index 0000000000..7f45ba9172
--- /dev/null
+++ b/files/pt-br/web/html/element/template/index.html
@@ -0,0 +1,198 @@
+---
+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>