<template>

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

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.

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;
}

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 20 jun 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content

<template>

In this article

Atributos

Ejemplo

Especificaciones

Compatibilidad con navegadores

Ver también

Help improve MDN