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

El **elemento** **HTML `<template>`** es un mecanismo para mantener el contenido HTML del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.

Piensa en la plantilla como un fragmento de contenido que está siendo almacenado para un uso posterior en el documento. El analizador procesa el contenido del elemento **`<template>`** durante la carga de la página, pero sólo lo hace para asegurar que esos contenidos son válidos; sin embargo, estos contenidos del elemento no se renderizan.

| Categorías de Contenido | Metadata content, flow content, phrasing content, script-supporting element |
| --- | --- |
| Contenido permitido | Sin restricciones |
| Omisión de etiquetas | None, both the starting and ending tag are mandatory. |
| Padres permitidos | Cualquier elemento que acepte metadata content, phrasing content, o script-supporting elements. También se permiten como hijos de un elemento `<colgroup>` que no tenga un atributo `span` . |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLTemplateElement` (en-US) |

Atributos
---------

Este elemento sólo incluye atributos globales.

Sin embargo, `HTMLTemplateElement` (en-US) tiene una propiedad `content` (en-US), que es solo-lectura cuyo `DocumentFragment` contiene el subárbol DOM que representa a la plantilla.

Ejemplo
-------

Primero empezamos con la parte HTML del ejemplo.


```html
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- datos opcionales pueden incluirse aquí opcionalmente -->
  </tbody>
</table>

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


Inicialmente tenemos una tabla en la cual insertaremos más tarde contenido usando código JavaScript. Más abajo viene el template, el cual describe la estructura de un fragmento HTML representando la fila de una tabla.

Ahora que la tabla ha sido creada y el template definido, usamos JavaScript para insertar filas en la tabla, con cada fila siendo construida usando el template como su base.


```js
// Comprobar si el navegador soporta el elemento HTML template element chequeando
// si tiene el atributo 'content'
if ("content" in document.createElement("template")) {
  // Instanciar la tabla con el tbody existente
  // y la fila con el template
  var t = document.querySelector("#productrow"),
    td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clonar la nueva fila e insertarla en la tabla
  var tb = document.querySelector("tbody");
  var clone = document.importNode(t.content, true);
  tb.appendChild(clone);

  // Crear una nueva fila
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clonar la nueva fila e insertarla en la tabla
  var clone2 = document.importNode(t.content, true);
  tb.appendChild(clone2);
} else {
  // Buscar otra manera de añadir filas a la tabla porque el
  // elemento template no está soportado.
}
```


El resultado es la tabla HTML original HTML , con dos nuevas filas adjuntadas via JavaScript:
```

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

Especificaciones
----------------

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

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* Web components: `<slot>` (e históríco: `<shadow>`)
* Usando templates y slots