<template>

Description

L’élément <template> contient du contenu HTML qui n’est pas rendu à l’affichage ni exécuté (les scripts, images et liens ne se chargent pas). Son contenu est accessible via la propriété JavaScript .content (un DocumentFragment), et peut être cloné et inséré dans le DOM dynamiquement. Il est fondamental pour les Web Components.

Syntaxe

<template id="modele-carte">
  <div class="carte">
    <h3></h3>
    <p></p>
  </div>
</template>

Exemples

Clonage de template via JavaScript :

<template id="carte-produit">
  <article class="carte">
    <h3 class="carte__titre"></h3>
    <p class="carte__prix"></p>
    <button type="button">Ajouter au panier</button>
  </article>
</template>

<div id="liste-produits"></div>

<script>
  const produits = [
    { titre: 'Produit A', prix: '29,99 €' },
    { titre: 'Produit B', prix: '49,99 €' },
  ];

  const template = document.getElementById('carte-produit');
  const liste = document.getElementById('liste-produits');

  produits.forEach(({ titre, prix }) => {
    const clone = template.content.cloneNode(true);
    clone.querySelector('.carte__titre').textContent = titre;
    clone.querySelector('.carte__prix').textContent = prix;
    liste.appendChild(clone);
  });
</script>

Déclarative Shadow DOM (SSR) :

<div>
  <template shadowrootmode="open">
    <style>:host { color: red; }</style>
    <slot></slot>
  </template>
  Contenu du slot
</div>

Attributs spécifiques

Attribut	Type	Description
shadowrootmode	enum	Active le Declarative Shadow DOM : open (JS peut accéder au shadow root) ou closed.

Notes

Contenu inerte : contrairement au display: none, le contenu d’un <template> n’est pas dans le DOM actif — les images ne se téléchargent pas, les scripts ne s’exécutent pas.

.content est un DocumentFragment : pour insérer le template, cloner son .content avec cloneNode(true) — ne pas l’insérer directement (il ne peut être utilisé qu’une fois sans clonage).