<template>

Тег <template> – (от английского template – шаблон) используется как контейнер для хранения HTML-кода для дальнейшего использования в JavaScript.

        
          
          <template>  <div class="card">    <h2 class="card__title"></h2>    <div class="card__content"></div>  </div></template>
          <template>
  <div class="card">
    <h2 class="card__title"></h2>
    <div class="card__content"></div>
  </div>
</template>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В <template> может храниться любая корректная HTML-разметка, в том числе стили и скрипты. Браузер будет проверять HTML-синтаксис, но содержимое тега <template> не будет отображаться на странице.

Если в шаблоне содержатся скрипты, они не выполнятся, а стили не применятся, пока содержимое шаблона не поместить на страницу.

Для того чтобы использовать содержимое шаблона в документе нужен JavaScript.

Элемент <template> поддерживает глобальные атрибуты, а также ряд специальных атрибутов, связанных с декларативным созданием Shadow DOM:

Добавляет родительскому элементу декларативный ShadowRoot. Это стандартный способ создать Shadow DOM прямо в HTML, аналог метода attachShadow(). Принимает значения:

• open — внутренний Shadow DOM будет доступен из JavaScript через свойство element.shadowRoot (рекомендуется для большинства случаев).
• closed — внутренний Shadow DOM будет скрыт от JavaScript, свойство element.shadowRoot вернёт null.

Если установлен, свойство clonable у созданного ShadowRoot будет равно true. Это значит, что при клонировании хоста (Node.cloneNode() или Document.importNode()) в копии сохранится и ShadowRoot.

Если установлен, свойство delegatesFocus у созданного ShadowRoot будет равно true. В этом случае, если фокус попадает на не-фокусируемый элемент внутри Shadow DOM, он автоматически перейдёт к первому фокусируемому элементу внутри дерева. По умолчанию — false.

Если установлен, свойство serializable у созданного ShadowRoot будет равно true. Это позволяет сериализовать содержимое ShadowRoot с помощью методов Element.getHTML() или ShadowRoot.getHTML() с опцией serializableShadowRoots: true. По умолчанию — false.

Тег <template> имеет свойство content, которое доступно только для чтения. По нему можно получить доступ к содержимому шаблона.

        
          
          if (document.createElement('template').content) {  /* Код выполнится, если браузер поддерживает <template> */} else {  /* Нужно придумать что-то другое */}
          if (document.createElement('template').content) {
  /* Код выполнится, если браузер поддерживает <template> */
} else {
  /* Нужно придумать что-то другое */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Имеем HTML-разметку с контейнером для списка покупок и шаблон элемента списка, завёрнутого в <template>:

        
          
          <div>  <h2>Список покупок</h2>  <ul class="list">  </ul>  <template id="template">    <li></li>  </template></div>
          <div>
  <h2>Список покупок</h2>
  <ul class="list">
  </ul>

  <template id="template">
    <li></li>
  </template>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Использование шаблона с помощью JavaScript:

        
          
          const list = document.querySelector('.list')const template = document.querySelector('#template')// Клонируем содержимое тега <template>const item = template.content.cloneNode(true)// Находим тег <li> и помещаем текст внутрьitem.querySelector('li').textContent = 'Молоко'// Вставляем склонированный контент на страницуlist.append(item)
          const list = document.querySelector('.list')
const template = document.querySelector('#template')

// Клонируем содержимое тега <template>
const item = template.content.cloneNode(true)

// Находим тег <li> и помещаем текст внутрь
item.querySelector('li').textContent = 'Молоко'

// Вставляем склонированный контент на страницу
list.append(item)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 В <template> могут находиться даже те теги, которые в обычной жизни не используются без родительского контейнера, такие как <li> или <tr>.

        
          
          <template>  <li></li></template><template>  <tr>    <td></td>  </tr></template>
          <template>
  <li></li>
</template>

<template>
  <tr>
    <td></td>
  </tr>
</template>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать