Шаблоны <template>

Элемент <template> предназначен для хранения «образца» разметки, невидимого и предназначенного для вставки куда-либо.

Конечно, есть много способов записать произвольный невидимый текст в HTML. В чём же особенность <template>?

Его отличие от обычных тегов в том, что его содержимое обрабатывается особым образом. Оно не только скрыто, но и считается находящимся вообще «вне документа». А при вставке автоматически «оживает», выполняются из него скрипты, начинает проигрываться видео и т.п.

Содержимое тега <template>, в отличие, к примеру, от шаблонов или <script type="неизвестный тип">, обрабатывается браузером. А значит, должно быть корректным HTML.

Оно доступно как DocumentFragment в свойстве тега content. Предполагается, что мы, при необходимости, возьмём content и вставим, куда надо.

Вставка шаблона

Пример вставки шаблона tmpl в Shadow DOM элемента elem:

<p id="elem">
  Доброе утро, страна!</p>

<template id="tmpl">
  <h3><content></content></h3>
  <p>Привет из подполья!</p>
  <script>
    document.write('...document.write:Новость!');
  </script>
</template>

<script>
  var root = elem.createShadowRoot();
  root.appendChild(tmpl.content.cloneNode(true));
</script>

У нас получилось, что:

1. В элементе #elem содержатся данные в некоторой оговорённой разметке.
2. Шаблон #tmpl указывает, как их отобразить, куда и в какие HTML-теги завернуть содержимое #elem.
3. Здесь шаблон показывается в Shadow DOM тега. Технически, это не обязательно, шаблон можно использовать и без Shadow DOM, но тогда не сработает тег <content>.

Можно также заметить, что скрипт из шаблона выполнился. Это важнейшее отличие вставки шаблона от вставки HTML через innerHTML и от обычного DocumentFragment.

Также мы вставили не сам tmpl.content, а его клон. Это обычная практика, чтобы можно было использовать один шаблон много раз.

Итого

Тег <template> не призван заменить системы шаблонизации. В нём нет хитрых операторов итерации, привязок к данным.

Его основная особенность – это возможность вставки «живого» содержимого, вместе со скриптами.

И, конечно, мелочь, но удобно, что он не требует никаких библиотек.