31. Templates and Slots

HTML: Скелет - Templates and Slots

Иллюстрация к уроку В этом уроке мы рассмотрим концепцию шаблонов (<template>) и слотов (<slot>) в HTML. Они позволяют создавать многократно используемые блоки разметки с возможностью их кастомизации.

Что такое Template?

Тег <template> позволяет хранить HTML-код, который не отображается на странице при ее загрузке. Этот код предназначен для использования в будущем, например, для динамического добавления контента с помощью JavaScript. Это как черновик, который можно использовать много раз.

<template id="my-template">
  <h2>Привет, мир!</h2>
  <p>Это шаблон.</p>
</template>

<script>
  // Получаем ссылку на шаблон
  const template = document.getElementById("my-template");

  // Клонируем содержимое шаблона
  const clone = template.content.cloneNode(true);

  // Добавляем клонированное содержимое в body
  document.body.appendChild(clone);
</script>

В этом примере, содержимое <template> с id="my-template" клонируется и добавляется в <body> страницы с помощью JavaScript.

Что такое Slot?

<slot> – это элемент-заполнитель внутри шаблона. Он определяет место, куда можно вставлять свой контент при использовании этого шаблона. Slot делает шаблон более гибким и переиспользуемым.

<template id="user-card">
  <div class="card">
    <h3><slot name="title">Заголовок по умолчанию</slot></h3>
    <p><slot name="description">Описание по умолчанию</slot></p>
  </div>
</template>

<div id="user-card-container"></div>

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

  const clone = template.content.cloneNode(true);

  // Создаем элементы, которые будут вставлены в слоты
  const title = document.createElement("h2");
  title.textContent = "Иван Иванов";
  title.setAttribute("slot", "title");

  const description = document.createElement("p");
  description.textContent = "Разработчик";
  description.setAttribute("slot", "description");

  // Добавляем слоты в клонированный шаблон
  clone.appendChild(title);
  clone.appendChild(description);

  container.appendChild(clone);

</script>

В этом примере, шаблон user-card имеет два слота: title и description. JavaScript создает элементы h2 и p и назначает им атрибуты slot, соответствующие именам слотов в шаблоне. При клонировании шаблона, эти элементы автоматически вставляются в соответствующие слоты. Если слот остается пустым, отображается контент по умолчанию.

Жизненный пример

Templates и slots широко используются во фреймворках для создания веб-компонентов (например, в Vue.js, React, Angular). Например, компонент карточки товара может быть реализован с использованием шаблона и слотов для названия, описания и изображения товара. Это позволяет легко переиспользовать компонент карточки товара на разных страницах сайта, просто передавая разные данные через слоты. Также, они используются в Shadow DOM для инкапсуляции стилей и разметки компонентов. Многие библиотеки UI (Material UI, Bootstrap) используют шаблоны и слоты для создания переиспользуемых компонентов.

Ключевые моменты

<template> позволяет хранить HTML, который изначально не отображается.
<slot> определяет место для вставки контента в шаблоне.
Слоты могут иметь имена для более точного управления вставкой контента.
Templates и slots помогают создавать переиспользуемый и кастомизируемый код.
Они активно используются во фреймворках для веб-разработки и UI-библиотеках.