Справочник HTML & CSS

<template>, <slot>

Заготовка разметки, которая не показывается, пока её не скопирует JavaScript; `<slot>` — место для вставки в веб-компонентах.

Синтаксис

<template id="card">…</template>

Атрибуты

Параметр	Тип	Описание
name	text	У `<slot>` — имя места, куда вставится содержимое с `slot="name"`.

Примеры

Карточки из шаблона:

<template id="drink">
  <p class="item">☕ <b></b></p>
</template>
<div id="list"></div>
 
<script>
  for (const name of ["Latte", "Mocha", "Flat white"]) {
    const copy = document.getElementById("drink").content.cloneNode(true);
    copy.querySelector("b").textContent = name;
    document.getElementById("list").append(copy);
  }
</script>

Слот в теневом DOM:

<div id="host"><span slot="title">Hello from the page</span></div>
 
<script>
  const root = document.getElementById("host").attachShadow({ mode: "open" });
  root.innerHTML = '<div style="border: 2px solid teal; padding: 8px">Card: <slot name="title"></slot></div>';
</script>

Примечания

Содержимое <template> разбирается, но не отображается и не выполняется: картинки не загружаются, скрипты не запускаются. <slot> работает только внутри теневого DOM — это основа веб-компонентов.

См. также

<script> — Подключает или встраивает JavaScript; `<noscript>` показывает запасное содержимое, если скрипты выключены.
<div> — Блочный контейнер без смысла: группирует элементы для оформления и раскладки.

В учебнике

Раскрывающиеся блоки и диалоги — Тег details и summary, аккордеон, модальное окно dialog, закрытие через form method=dialog и всплывающие блоки popover.

Спасибо, что читаете!