Тег <template>
Описание
Тег <template> служит контейнером для HTML-шаблонов, которые не отображаются при загрузке страницы, но могут быть клонированы и вставлены в документ с помощью JavaScript. Это механизм для хранения повторно используемых фрагментов разметки.
<template id="user-card">
<div class="card">
<h3></h3>
<p class="email"></p>
</div>
</template>
Ключевые особенности:
- Содержимое не отображается до активации JavaScript
- Не вызывает загрузку внешних ресурсов (изображения, скрипты)
- Доступен через API
document.querySelector('template').content - Может содержать любые валидные HTML-элементы
- Поддерживается всеми современными браузерами
<template id="news-item">
<article class="news">
<h2></h2>
<time datetime=""></time>
<p></p>
</article>
</template>
<div id="news-container"></div>
<script>
const template = document.getElementById('news-item');
const content = template.content.cloneNode(true);
content.querySelector('h2').textContent = 'Новый стандарт HTML6';
content.querySelector('time').textContent = '15 мая 2023';
content.querySelector('time').setAttribute('datetime', '2023-05-15');
content.querySelector('p').textContent = 'W3C анонсировал...';
document.getElementById('news-container').appendChild(content);
</script>
Стилизация шаблонов:
<style>
/* Стили для шаблона (применятся после вставки) */
.user-card {
border: 1px solid #ddd;
padding: 15px;
margin: 10px 0;
}
</style>
<template id="user-template">
<div class="user-card">
<h3>Имя пользователя</h3>
<p>Описание профиля</p>
</div>
</template>
Рекомендации по использованию:
- Используйте для динамически генерируемого контента
- Храните сложные фрагменты разметки
- Избегайте вставки активных элементов (скриптов, стилей)
- Для веб-компонентов сочетайте с
customElements.define() - Оптимизируйте производительность при массовой вставке
Тег <template> предоставляет мощный механизм для работы с клиентскими шаблонами, позволяя создавать сложные динамические интерфейсы с чистой разметкой и эффективным управлением DOM.
Атрибуты
| class | CSS-классы для стилизации |
| data-* | Пользовательские данные |
| id | Уникальный идентификатор |
| slot | Имя слота для теневого DOM |
| style | Инлайновые стили |
| shadowrootmode | Режим корня теневого DOM (experimental) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 13.0 | 26.0 | 15.0 | 22.0 | 8.0 |