Używanie template do renderowania za pomocą JavaScript

Element <template> przechowuje kod HTML, który nie jest renderowany, dopóki JavaScript go nie sklonuje i nie wstawi. Jego zawartość jest nieaktywna — skrypty nie są wykonywane, obrazy nie są ładowane, a style nie są stosowane — dopóki szablon nie zostanie aktywowany.

Zawartość szablonu znajduje się w obiekcie DocumentFragment dostępnym przez template.content. Aby jej użyć, sklonuj fragment: const clone = template.content.cloneNode(true). Argument true wykonuje głębokie klonowanie obejmujące wszystkie węzły potomne.

Dostosuj klon przed wstawieniem: wyszukaj elementy wewnątrz klonu, ustaw zawartość tekstową i dodaj nasłuchiwacze zdarzeń. Następnie dodaj klon do DOM: container.appendChild(clone). Każde wywołanie cloneNode() tworzy niezależną kopię — można ją modyfikować bez wpływu na pozostałe kopie.

Połącz szablony z Array.forEach lub Array.map, aby renderować listy: dla każdego elementu danych sklonuj szablon, uzupełnij wartości i dodaj element do kontenera listy. Ten wzorzec przypomina rozwiązania frameworkowe, ale opiera się na standardowym HTML i JavaScript.

Zdefiniuj element <template> zawierający element <tr> z komórkami. Sklonuj go i uzupełnij dla każdego wiersza danych. Pozwala to uniknąć konkatenacji ciągów podczas generowania HTML — nie jest potrzebne kodowanie znaków, ponieważ ustawiasz textContent, a nie innerHTML.

Szablony nigdy nie są renderowane automatycznie. Dzięki temu można bezpiecznie przechowywać fragmenty renderowane warunkowo: wyświetlać szablon „brak wyników” tylko wtedy, gdy wyszukiwanie nie zwróci wyników, szablon błędu tylko w przypadku niepowodzenia żądania sieciowego oraz szkielet interfejsu podczas pobierania danych.

Szablon może zawierać inne szablony — zagnieżdżone szablony pozostają nieaktywne wewnątrz obiektu DocumentFragment zewnętrznego szablonu. Umożliwia to tworzenie hierarchii przypominających komponenty, w których zewnętrzny szablon klonuje, a następnie w razie potrzeby aktywuje wewnętrzne szablony.

Style wewnątrz znacznika <style> szablonu nie są stosowane do dokumentu — pozostają nieaktywne, dopóki szablon nie zostanie utworzony, a jego zawartość przeniesiona do aktywnego DOM. Dzięki temu szablony mogą zawierać własne style bez zanieczyszczania strony.

Analizowanie innerHTML to synchroniczne przetwarzanie ciągu HTML — HTML jest analizowany ponownie przy każdym użyciu. template.cloneNode() kopiuje drzewo, które zostało już przeanalizowane. W przypadku wielokrotnego renderowania tej samej struktury klonowanie szablonu jest szybsze i eliminuje zagrożenia XSS wynikające z konkatenacji ciągów.

Element template nie ma wbudowanego mechanizmu wiązania danych — każdy klon trzeba ręcznie wyszukać i uzupełnić. W przypadku złożonych potrzeb związanych z wiązaniem danych lepszym rozwiązaniem będzie framework lub biblioteka. Szablony służą do prostego, ręcznego renderowania bez narzutu frameworka.

Element template jest obsługiwany we wszystkich nowoczesnych przeglądarkach (IE11 oferował częściową obsługę). W środowiskach wymagających obsługi IE należy zastosować polyfill, analizując zawartość szablonu podczas inicjalizacji. W nowoczesnych projektach można używać template bez polyfill.

Dlaczego template.content.cloneNode(true) jest preferowane zamiast innerHTML podczas wielokrotnego renderowania?

Element template przechowuje nieaktywne, wcześniej przeanalizowane fragmenty HTML. Klonowanie template.content tworzy niezależne instancje na potrzeby ręcznego wiązania danych. W połączeniu z przypisywaniem wartości do textContent (bez XSS) szablony umożliwiają renderowanie list przypominające rozwiązania frameworkowe, warunkowe tworzenie interfejsu i wielokrotne używanie wzorców HTML wyłącznie za pomocą standardowych API przeglądarki.