<template>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2015.

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	Ninguna, tanto la etiqueta inicial como la final son obligatorias.
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`

Atributos

Este elemento sólo incluye atributos globales.

Sin embargo, HTMLTemplateElement tiene una propiedad content, 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.

// 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

Ver también

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