HTML Template

Definition

Élément <template> dont le contenu est parsé mais pas rendu ni exécuté. On le clone via JS pour instancier des fragments de DOM à la demande, de manière performante.

Analogie

Comme un patron de couture : il n'est pas un vêtement en soi, mais on peut en fabriquer autant qu'on veut.

Exemple de code

<template id="card-tpl">
  <div class="card"><slot name="title"></slot></div>
</template>
<script>
const tpl = document.getElementById('card-tpl');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);
</script>

Cas d'usage

Définir des structures réutilisables côté HTML pour les Web Components ou le rendu dynamique.

Termes lies