La Etiqueta TEMPLATE

Permite almacenar fragmentos de HTML que no se renderizan inicialmente, pero que pueden ser clonados y utilizados dinámicamente mediante JavaScript.

La etiqueta <template> en HTML permite almacenar fragmentos de HTML que no se renderizan inicialmente, pero que pueden ser clonados y utilizados dinámicamente mediante JavaScript. Es ideal para estructuras reutilizables, como listas, tarjetas, formularios o componentes que se generan múltiples veces. Aquí te explicamos cómo usarla correctamente.

¿Qué es `<template>`?

Propósito: Almacenar contenido HTML que se activa (clona y muestra) mediante JavaScript.
Características:
- El contenido dentro de <template> es inert (scripts no se ejecutan, imágenes no cargan).
- No afecta el renderizado inicial de la página.
- Compatible con todos los navegadores modernos (no soportado en IE11).

Sintaxis básica

Coloca el contenido dentro de <template> y asígnale un id para accederlo:

<template id="miTemplate">
  <!-- Contenido HTML aquí -->
</template>

Ejemplo práctico: Crear elementos dinámicamente

a) HTML: Definir el template

<template id="tarjeta-usuario">
  <div class="tarjeta">
    <h2 class="nombre"></h2>
    <p class="email"></p>
  </div>
</template>

b) JavaScript: Clonar y usar el template

// Obtener el template
const template = document.getElementById('tarjeta-usuario');
// Clonar su contenido (true = clonar nodos hijos)
const contenido = template.content.cloneNode(true);

// Modificar datos
contenido.querySelector('.nombre').textContent = 'Ana Pérez';
contenido.querySelector('.email').textContent = 'ana@ejemplo.com';

// Agregar al DOM
document.body.appendChild(contenido);

Casos de uso comunes

a) Listas generadas dinámicamente

<template id="item-lista">
  <li class="item"></li>
</template>

<ul id="lista"></ul>

<script>
  const datos = ['Manzana', 'Plátano', 'Naranja'];
  const lista = document.getElementById('lista');

  datos.forEach(item => {
    const template = document.getElementById('item-lista');
    const contenido = template.content.cloneNode(true);
    contenido.querySelector('.item').textContent = item;
    lista.appendChild(contenido);
  });
</script>

b) Componentes reutilizables (tarjetas, modales)

<template id="modal-info">
  <div class="modal">
    <h2>Título</h2>
    <p>Contenido del modal...</p>
    <button class="cerrar">Cerrar</button>
  </div>
</template>

<script>
  function mostrarModal(titulo, mensaje) {
    const template = document.getElementById('modal-info');
    const contenido = template.content.cloneNode(true);
    
    contenido.querySelector('h2').textContent = titulo;
    contenido.querySelector('p').textContent = mensaje;
    
    const modal = contenido.querySelector('.modal');
    modal.querySelector('.cerrar').addEventListener('click', () => {
      modal.remove();
    });
    
    document.body.appendChild(contenido);
  }

  mostrarModal('Bienvenido', '¡Hola, mundo!');
</script>

Ventajas de usar `<template>`

Mantenibilidad: Separa el HTML estático del dinámico.
Rendimiento: Evita reprocesar cadenas de texto HTML repetidamente.
Claridad: Mejora la organización del código.
Seguridad: El contenido inert previene ejecución accidental de scripts.

Buenas prácticas

Ubicación del template: Colócalo en el <head> o al final del <body>.
IDs descriptivos: Usa nombres claros para identificadores (ej: modal-error).
Reutilización: Define templates genéricos que acepten datos variables.
Accesibilidad: Añade roles ARIA y atributos si el contenido lo requiere.

Diferencias con alternativas

Método	Ventajas
`<template>`	Contenido inert, no afecta al DOM inicial, fácil de clonar.
Strings HTML	Útil para contenido simple, pero ineficiente para estructuras complejas.
CSS `display:none`	El contenido oculto sigue cargando recursos (imágenes, scripts).

Ejemplo avanzado: Template con estilos y scripts

<template id="alerta-personalizada">
  <style>
    .alerta {
      padding: 15px;
      background: #f8d7da;
      border: 1px solid #f5c6cb;
      border-radius: 5px;
    }
  </style>
  <div class="alerta">
    <p class="mensaje"></p>
  </div>
</template>

<script>
  function crearAlerta(mensaje) {
    const template = document.getElementById('alerta-personalizada');
    const contenido = template.content.cloneNode(true);
    
    // Los estilos y scripts dentro del template se activan al clonar
    contenido.querySelector('.mensaje').textContent = mensaje;
    document.body.appendChild(contenido);
  }

  crearAlerta('¡Este es un mensaje de alerta!');
</script>

Conclusión

La etiqueta <template> es esencial para:

Gestionar contenido dinámico de forma eficiente.
Estructurar proyectos con componentes reutilizables.
Optimizar el rendimiento al evitar reprocesar HTML.

Recuerda:

Usa JavaScript para clonar y activar el contenido.
Combínala con buenas prácticas de diseño y accesibilidad.
Prioriza su uso en aplicaciones modernas con datos dinámicos.

¡Incorpora <template> en tus proyectos para crear interfaces más limpias y mantenibles!

¿Qué es <template>?