Веб Мастерская | Веб разработка и программирование | ИТ | IT
Без категории · 5 октября 2026 г.
HTML:
HTML: Коллеги, наливайте кофе ☕. Поговорим о магии, которая превращает наши унылые, повторяющиеся куски HTML в настоящие конструкторы LEGO. Вы ведь тоже ненавидите копировать один и тот же блок карточки товара, меняя в нём только картинку и текст? А потом приходит заказчик и говорит: «А давайте добавим бейджик "Новинка" вот сюда». И ты такой сидишь, ищешь по всему проекту этот чёртов блок в десяти местах... Было такое? У меня — постоянно. До тех пор, пока я по-настоящему не подружился с двумя недооценёнными тегами: <template> и <slot> . Это не просто какой-то там синтаксис, это фундамент для создания по-настоящему гибких веб-компонентов, даже если вы пишете на чистом HTML/CSS/JS, без всяких React и Vue. Проблема: когда копипаст побеждает Представьте, что вам нужно сделать модальное окно. Заголовок, текст, кнопка «Закрыть». Вы пишете HTML. Потом вам нужно ещё одно модальное окно, но для формы подписки. Вы копируете первый блок. Потом — для галереи. Снова копируете. В итоге у вас 5 почти одинаковых кусков кода. Любое изменение — от цвета кнопки до обёртки — превращается в увлекательный квест «найди и замени». Это не разработка, это работа секретарем. Решение: скелеты в шкафу и именные прорези Вот тут-то на сцену и выходят наши герои. <template> : невидимый черновик Этот тег — просто гениальная вещь. Браузер, встречая его, парсит всё, что внутри, но не отображает на странице. Это как чертёж детали, который лежит у вас на столе, но сама деталь ещё не изготовлена. Вы можете хранить в нём любую HTML-разметку: с дивами, стилями, скриптами. Он абсолютно инертен, пока вы его не «активируете» через JavaScript. <slot> : заполнитель, а не чёрная дыра А это — место в вашем «чертеже», куда будет вставляться конкретный контент. Представьте, что у вас есть рамка для фото. <slot> — это та самая рамка. А что в неё вставить — вашу фотку с отпуска, или фото кота, или диплом — решает тот, кто использует компонент. Слоты могут быть именованными. Это как иметь в рамке несколько прорезей: для основного фото, для подписи и для даты. Практика: собираем карточку профиля Давайте посмотрим, как это работает вживую. Сделаем универсальную карточку пользователя. Сначала — наш «чертёж» в <template>: <template id="user-card-template"> <div class="card"> <img class="avatar" alt="Аватар" id="nmid10"> <h3><slot name="username">Имя не задано</slot></h3> <p><slot name="bio">Пусто.</slot></p> <slot name="actions"></slot> <!-- для кнопок --> </div> </template> Теперь — как мы его используем на странице: <!-- А вот здесь мы используем наш компонент --> <user-card> <span slot="username">Сергей Абрамов</span> <span slot="bio">Пишу код и пью кофе.</span> <button slot="actions">Написать</button> </user-card> И немного JavaScript, чтобы оживить это: // Находим все кастомные теги user-card на странице const userCards = document.querySelectorAll('user-card'); const template = document.getElementById('user-card-template'); userCards.forEach(card => { // Клонируем содержимое template const content = template.content.cloneNode(true); card.appendChild(content); }); Что мы получили? Мы описали структуру карточки один раз. А использовать её можем сколько угодно, просто подставляя разный контент в «прорези». Нужно добавить бейдж "PRO" в шапку? Меняешь один шаблон, и все карточки на сайте обновляются. Магия! Не пытайтесь сразу переписать весь проект на веб-компонентах. Начните с малого. Возьмите самый заезженный повторяющийся блок на вашем сайте — будь то уведомление, карточка или модалка — и попробуйте упаковать его в template + slot . Вы моментально почувствуете разницу. Это как перейти от ручного распила досок к форматно-раскроечному станку. Вот так. Идем кодить дальше! 🚀