Utiliser `template` pour le rendu JavaScript

L'élément <template> contient du HTML qui n'est pas rendu tant qu'il n'a pas été cloné et inséré par JavaScript. Son contenu est inerte : les scripts ne s'exécutent pas, les images ne se chargent pas et les styles ne s'appliquent pas tant que le modèle n'est pas activé.

Le contenu du modèle se trouve dans un DocumentFragment à l'emplacement template.content. Pour l'utiliser, clonez le fragment : const clone = template.content.cloneNode(true). L'argument true effectue un clonage profond qui inclut tous les nœuds descendants.

Personnalisez le clone avant de l'insérer : recherchez des éléments dans le clone, définissez leur contenu textuel et ajoutez des écouteurs d'événements. Ajoutez-le ensuite au DOM : container.appendChild(clone). Chaque appel à cloneNode() crée une copie indépendante : vous pouvez en modifier une sans affecter les autres.

Combinez les modèles avec Array.forEach ou Array.map pour afficher des listes : pour chaque élément des données, clonez le modèle, renseignez les valeurs, puis ajoutez le résultat à un conteneur de liste. Cette approche rappelle le fonctionnement d'un cadre logiciel, tout en reposant sur le HTML et JavaScript standards.

Définissez un <template> contenant un <tr> avec des cellules. Clonez-le et renseignez-le pour chaque ligne de données. Vous évitez ainsi la concaténation de chaînes pour générer du HTML : aucun échappement n'est nécessaire puisque vous définissez textContent plutôt que innerHTML.

Les modèles ne sont jamais rendus automatiquement. Ils sont donc adaptés au stockage de fragments qui seront rendus sous certaines conditions : affichez un modèle « aucun résultat » uniquement lorsque la recherche ne renvoie rien, un modèle d'erreur uniquement en cas d'échec réseau et un squelette de chargement pendant la récupération des données.

Un modèle peut en contenir d'autres : les modèles imbriqués restent inertes dans le DocumentFragment du modèle extérieur. Cela permet de créer des hiérarchies semblables à des composants, dans lesquelles le modèle extérieur clone puis active les modèles intérieurs selon les besoins.

Les styles placés dans une balise <style> d'un modèle ne s'appliquent pas au document : ils restent inertes jusqu'à l'instanciation du modèle et au déplacement de son contenu vers le DOM actif. Les modèles peuvent ainsi contenir leurs propres styles sans polluer la page.

L'analyse effectuée par innerHTML est un traitement synchrone d'une chaîne HTML : le HTML est analysé de nouveau à chaque fois. template.cloneNode() copie un arbre déjà analysé. Pour rendre plusieurs fois la même structure, le clonage d'un modèle est plus rapide et évite les risques XSS liés à la concaténation de chaînes.

L'élément template ne possède aucune liaison de données intégrée : vous devez rechercher manuellement les éléments de chaque clone et les remplir. Pour des besoins complexes de liaison de données, un cadre logiciel ou une bibliothèque est plus approprié. Les modèles sont destinés à des approches de rendu simples et manuelles, sans la surcharge d'un cadre logiciel.

L'élément template est pris en charge par tous les navigateurs modernes (IE11 n'offrait qu'une prise en charge partielle). Pour les environnements nécessitant la prise en charge d'IE, utilisez un polyfill qui analyse le contenu du modèle lors de l'initialisation. Dans les projets modernes, utilisez template sans polyfill.

Pourquoi template.content.cloneNode(true) est-il préférable à innerHTML pour effectuer des rendus répétés ?

L'élément template contient des fragments HTML inertes et préalablement analysés. Le clonage de template.content crée des instances indépendantes pour effectuer une liaison manuelle des données. Associés à l'affectation de textContent (sans XSS), les modèles permettent de rendre des listes comme avec un cadre logiciel, de créer des interfaces conditionnelles et de réutiliser des structures HTML en utilisant uniquement les API standards du navigateur.