Usare template per il rendering con JavaScript

L'elemento <template> contiene HTML che non viene visualizzato finché non viene clonato e inserito da JavaScript. Il suo contenuto è inerte: gli script non vengono eseguiti, le immagini non vengono caricate e gli stili non vengono applicati finché il template non viene attivato.

Il contenuto del template risiede in un DocumentFragment all'indirizzo template.content. Per usarlo, cloni il fragment: const clone = template.content.cloneNode(true). L'argomento true esegue una clonazione profonda che include tutti i nodi discendenti.

Personalizzi il clone prima di inserirlo: esegua query all'interno del clone, imposti il contenuto testuale e aggiunga i gestori di eventi. Poi lo aggiunga al DOM: container.appendChild(clone). Ogni cloneNode() crea una copia indipendente: può modificare una copia senza influire sulle altre.

Combini i template con Array.forEach o Array.map per eseguire il rendering degli elenchi: per ogni elemento dei dati, cloni il template, inserisca i valori e aggiunga il risultato a un contenitore dell'elenco. Questo pattern è simile a quello dei framework, ma si basa su HTML e JavaScript standard.

Definisca un <template> contenente un <tr> con le celle. Lo cloni e lo completi per ogni riga di dati. In questo modo evita la concatenazione di stringhe per generare HTML: non è necessario eseguire l'escape, poiché imposta textContent invece di innerHTML.

I template non vengono mai visualizzati automaticamente. Questo li rende sicuri per memorizzare frammenti da visualizzare in modo condizionale: mostri un template «nessun risultato» solo quando la ricerca non restituisce elementi, un template di errore solo in caso di errore di rete e uno scheletro di caricamento durante il recupero dei dati.

Un template può contenere altri template: i template annidati rimangono inerti all'interno del DocumentFragment del template esterno. Questo consente di creare gerarchie simili a componenti, in cui un template esterno clona e poi attiva i template interni secondo necessità.

Gli stili all'interno del tag <style> di un template non vengono applicati al documento: rimangono inerti finché il template non viene istanziato e il suo contenuto non viene spostato nel DOM attivo. Questo consente ai template di contenere i propri stili senza contaminare la pagina.

L'analisi di innerHTML è un'elaborazione sincrona di stringhe HTML: l'HTML viene analizzato nuovamente ogni volta. template.cloneNode() copia un albero già analizzato. Per eseguire ripetutamente il rendering della stessa struttura, la clonazione del template è più veloce e previene i rischi XSS dovuti alla concatenazione di stringhe.

L'elemento template non dispone di data binding integrato: deve eseguire manualmente query e compilare ogni clone. Per esigenze complesse di data binding, è più appropriato usare un framework o una libreria. I template sono pensati per pattern di rendering semplici e manuali, senza il sovraccarico di un framework.

L'elemento template è supportato da tutti i browser moderni (IE11 offriva un supporto parziale). Negli ambienti che richiedono il supporto di IE, aggiunga un polyfill analizzando il contenuto del template durante l'inizializzazione. Nei progetti moderni, usi template senza polyfill.

Perché template.content.cloneNode(true) è preferibile a innerHTML per il rendering ripetuto?

L'elemento template contiene frammenti HTML inerti e già analizzati. La clonazione di template.content crea istanze indipendenti per il data binding manuale. Insieme all'assegnazione tramite textContent (senza XSS), i template consentono di eseguire il rendering di elenchi, creare interfacce condizionali e riutilizzare pattern HTML usando solo le API standard del browser.