🧱 Введение: DOM — это не просто HTML-файл
Когда вы открываете страницу в браузере, HTML-код превращается в DOM-дерево — структуру в памяти, с которой работает JavaScript и которую рисует браузер.
Но не вся разметка сразу становится частью этого дерева. Иногда нам нужно заготовить фрагменты разметки, но не рендерить их прямо сейчас.
Для этого и существует <template>.
🛠️ Что делает <template> (технически)
Тег <template> — это контейнер для «холодного» HTML.
Всё, что внутри него:
- Не рендерится — браузер не создаёт для него DOM-узлы.
- Не запускает скрипты — даже если там <script>, он проигнорирован.
- Не загружает ресурсы — <img>, <audio>, <iframe> — всё «заморожено».
- Сохраняется как DocumentFragment в свойстве .content.
Этот фрагмент можно клонировать и вставлять в DOM по мере необходимости — например, при клике, при получении данных от сервера, или при создании списка элементов.
💡 Другие способы отложенного рендеринга (например, display: none) не решают ту же задачу: они всё равно создают DOM-узлы (занимают память), запускают скрипты и грузят ресурсы. <template> — единственный настоящий способ «подержать HTML в холодильнике».
🧩 <template> — это форма для льда
Представьте: вы хотите сделать 10 кубиков льда.
Вы не льёте воду прямо на стол — вы берёте форму, заливаете её, ставите в морозилку, а потом по мере надобности выталкиваете готовые кубики.
<template> — это и есть такая форма:
- внутри — «вода» (разметка),
- но пока не «замерзла» — она не кубик, не мешает, не течёт,
- а когда нужно — вы «выталкиваете» (клонируете .content) столько копий, сколько требуется.
Без формы вы бы замораживали воду прямо на столе — катастрофа. Без <template> вы бы вставляли «полуфабрикаты» в DOM — тратили бы память, запускали скрипты и ломали логику.
Обратите внимание:
- cloneNode(true) — глубокое клонирование (всего содержимого).
- template.content — это DocumentFragment, а не обычный элемент. Он не создаёт лишнего <div>-обёртки.
⚠️ Важные нюансы (частые ошибки)
- <template> не виден в querySelector внутри себя
template.querySelector('.name') — не сработает, потому что внутри template нет DOM-узлов. Ищите только в .content: template.content.querySelector('.name') - Стили внутри <template> не применяются глобально
<style> внутри <template> работает только после вставки в DOM. Но лучше выносить стили во внешнюю таблицу — особенно если клонируете много раз. - Поддержка: 98% браузеров (caniuse.com — template)
Если вам нужна поддержка IE11 — забудьте. Там <template> есть, но ведёт себя странно (.content — не DocumentFragment). Для legacy-кода используйте <script type="text/html"> — но это костыль.
🏁 Заключение: когда использовать <template>
— При создании многократно повторяющихся компонентов (карточки, строки таблицы, модалки).
— В без фреймворковых SPA — чтобы не собирать разметку через +=.
— В кастомных элементах (customElements.define) — как шаблон по умолчанию.
— В SSR + гидратации — когда сервер отдаёт «пустые» шаблоны для докомплектации на клиенте.
Это не «синтаксический сахар». Это инструмент оптимизации и контроля над жизненным циклом DOM.
📌 Главное правило:
Если вы пишете HTML, который не должен быть видимым сейчас, но должен быть легко доступен для клонирования — кладите его в <template>.
Ставьте 👍, если цените точность.
Пишите в комментарии — какой кейс использования <template> у вас был самым неочевидным?