Народ, всем привет. Современный HTML это не только статическая разметка, о чем мы уже говорили в прошлых статьях, но и инструменты для создания переиспользуемых компонентов. Одними из таких инструментов являются тег <template> и механизм <slot>, который используется вместе с Web Components. Они позволяют отделить структуру от данных, сделать код чище и приблизить нативный HTML к компонентному подходу, знакомому по React или Vue. Пока ничего не понятно? Давайте разбираться.
Что такое <template>
Тег <template> предназначен для хранения HTML-разметки, которая не отображается сразу на странице и не участвует в рендеринге, пока вы явно не используете её через JavaScript. Браузер парсит содержимое <template>, но не добавляет его в DOM. Вот простейший пример:
<template id="card-template">
<div class="card">
<h2 class="title"></h2>
<p class="description"></p>
</div>
</template>
Эта разметка не появится на странице сама по себе. Чтобы использовать её, нужно получить шаблон и клонировать его содержимое:
<script>
const template = document.getElementById('card-template');
const clone = template.content.cloneNode(true);
clone.querySelector('.title').textContent = 'Заголовок';
clone.querySelector('.description').textContent = 'Описание карточки';
document.body.appendChild(clone);
</script>
Таким образом, <template> идеально подходит для повторяющихся элементов интерфейса, генерации HTML через JavaScript и уменьшения дублирования разметки. Но зачем, вроде же можно справиться и без всего этого? По факту да, НО… всегда бывает это но…
- Во-первых, шаблон не влияет на производительность рендера страницы, пока не используется.
- Во-вторых, его содержимое не «засоряет» DOM.
- И наконец, это нативное решение без сторонних библиотек, которое поддерживается всеми современными браузерами.
Канал «Т.Е.Х.Н.О Windows & Linux» — экспертные статьи, реальные гайды, настройка ПК, приватность и оптимизация. Всё бесплатно и без платных подписок!
Присоединяйся, чтобы стать профи!
Что такое <slot>
Тег <slot> используется в Web Components, а именно внутри Shadow DOM. Он определяет место, куда будет подставляться внешний контент компонента. Проще говоря, <slot> это некое «окно» для пользовательского содержимого. Рассмотрим простой пример пользовательского элемента.
<template id="alert-template">
<style>
.alert {
border: 1px solid red;
padding: 10px;
}
</style>
<div class="alert">
<slot></slot>
</div>
</template>
Теперь создадим компонент на основе этого шаблона:
<script>
class MyAlert extends HTMLElement {
constructor() {
super();
const template = document.getElementById('alert-template');
const shadow = this.attachShadow({ mode: 'open' });
shadow.appendChild(template.content.cloneNode(true));
}
}
customElements.define('my-alert', MyAlert);
</script>
Далее использование компонента:
<my-alert>
Это сообщение об ошибке
</my-alert>
Вот и все, текст «Это сообщение об ошибке» попадёт внутрь <slot>. Если нужно несколько областей для вставки контента, используются именованные слоты.
<template id="card-template">
<div class="card">
<h2><slot name="title"></slot></h2>
<div class="content">
<slot name="content"></slot>
</div>
</div>
</template>
Использование:
<my-card>
<span slot="title">Заголовок карточки</span>
<p slot="content">Основной текст</p>
</my-card>
Такой подход делает компонент гибким и позволяет управлять его содержимым извне. При этом, кстати, если слот не заполнен, можно указать fallback-контент: <slot>Контент по умолчанию</slot>. Этот текст будет отображаться только в том случае, если пользователь не передал собственный контент.
Связка <template> + <slot>
Чаще всего <template> используется как основа для Web Component, а <slot> как механизм вставки данных. Вместе они позволяют создавать изолированные компоненты, избегать конфликтов CSS (через Shadow DOM) и писать масштабируемый и поддерживаемый HTML.
- <template> полезен даже без Web Components, для генерации интерфейса через JavaScript.
- <slot> имеет смысл применять, если вы создаёте переиспользуемые UI-компоненты и хотите контролировать их структуру, но не контент.
Если проект небольшой и не требует компонентного подхода, использование <slot> может быть избыточным. Однако для дизайн-систем, библиотек компонентов и сложных интерфейсов это мощный и нативный инструмент. Они позволяют отделять шаблон от логики, управлять контентом и создавать переиспользуемые элементы, оставаясь в рамках стандартов веба. Освоив их, вы сможете писать более чистую, гибкую и современную разметку.
Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.