Вёрстка сайтов | HTML, CSS, JS on Telegram: “HTML <template> и <slot>

HTML <template> и <slot> — динамический контент без фреймворков

Раньше, чтобы повторно вставлять куски HTML, приходилось дублировать код или генерировать его в JS строками.
Но есть два тега, которые сильно упрощают задачу: <template> и <slot>.

1. <template> — заготовка для HTML
Этот тег не отображается на странице, пока вы явно не вставите его содержимое через JavaScript.
Пример:

<template id="card-template">
  <div class="card">
    <h3></h3>
    <p></p>
  </div>
</template>

<div id="container"></div>

<script>
  const template = document.getElementById('card-template');
  const container = document.getElementById('container');

  const data = [
    { title: "Карточка 1", text: "Первое описание" },
    { title: "Карточка 2", text: "Второе описание" }
  ];

  data.forEach(item => {
    const clone = template.content.cloneNode(true);
    clone.querySelector('h3').textContent = item.title;
    clone.querySelector('p').textContent = item.text;
    container.appendChild(clone);
  });
</script>

Что происходит:
template.content — это "невидимый" фрагмент HTML.
cloneNode(true) копирует весь его контент.
Мы изменяем текст и вставляем в DOM.

2. <slot> — динамическое содержимое в Web Components
<slot> используется внутри кастомных элементов, чтобы вставлять туда любой HTML снаружи.
Пример:

<template id="user-card">
  <div class="user-card">
    <slot name="avatar"></slot>
    <slot name="info"></slot>
  </div>
</template>
<script>
  class UserCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('user-card');
      shadow.appendChild(template.content.cloneNode(true));
    }
  }
  customElements.define('user-card', UserCard);
</script>

<user-card>
  <img slot="avatar" src="avatar.png" width="50">
  <div slot="info">Имя: Тигран</div>
</user-card>

Что происходит:
Создаём кастомный элемент <user-card>.
Внутри шаблона <slot> указывает, куда вставлять содержимое.
Атрибут slot у дочерних элементов определяет, в какой слот они попадут.
Когда применять
Генерация повторяющихся блоков (карточки, списки, таблицы).
Создание переиспользуемых UI-компонентов без библиотек.
В связке с Web Components для сложных интерфейсов.

#полезности #html