Элементы slot для распределения содержимого
Проецируйте содержимое элемента-хозяина в shadow DOM с именованными и стандартными слотами
«Элементы slot для распределения содержимого» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Обычный DOM и теневой DOM
Потомки, записанные внутри пользовательского элемента в HTML, образуют его «обычный DOM» — они не входят в теневое дерево. По умолчанию браузер не отображает их; теневое дерево должно явно запросить их с помощью <slot>.
Слот по умолчанию
Элемент <slot> внутри теневого дерева обозначает место, где должны появиться потомки из обычного DOM. Если имя не указано, это слот по умолчанию, принимающий любого непосредственного потомка хоста.
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>Именованные слоты
К нескольким слотам можно обращаться по имени. В теневом дереве объявляется <slot name="header">, а пользователь указывает <h1 slot="header">. Потомки с соответствующим атрибутом slot заполняют этот слот, а потомки без соответствия попадают в слот по умолчанию.
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>Резервное содержимое слота
Содержимое между тегами слота отображается только тогда, когда этому слоту ничего не назначено: <slot>No content provided</slot>. Используйте его, чтобы показывать заполнитель или поясняющий текст для пустых слотов.
Наследование стилей через слоты
Потомки, помещённые в слоты, остаются в обычном DOM и наследуют стили из основного документа, а не из теневого дерева. Чтобы стилизовать их изнутри теневого дерева, используйте псевдоэлемент ::slotted(): ::slotted(p) { color: red; }.
Ограничения ::slotted
::slotted() может выбирать только непосредственных потомков хоста — элементы, фактически распределённые по слотам. Он не может выбирать их потомков. Для более глубокой стилизации предоставьте пользовательские свойства CSS или используйте ::part для элементов внутри теневого дерева.
Обнаружение изменений слота
Каждый слот создаёт событие slotchange, когда изменяются назначенные ему узлы. Подпишитесь на это событие, чтобы реагировать на динамические обновления содержимого: slot.addEventListener("slotchange", handler). Это полезно для компонентов, расположение которых зависит от наличия тех или иных потомков.
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes и assignedElements
slot.assignedNodes() возвращает все узлы, назначенные слоту, включая текстовые узлы. slot.assignedElements() возвращает только дочерние элементы Element — обычно именно этот вариант нужен при программном переборе содержимого слота.
Распределение потомков
Браузер автоматически выполняет всё распределение на основе атрибута slot каждого потомка. Шаг с JavaScript не требуется: укажите <span slot="footer">...</span> среди потомков хоста в обычном DOM, и соответствующий слот теневого дерева будет его содержать.
Слоты и стилизация хоста
Собственные стили хоста (заданные для <my-card> в документе) каскадируют на потомков обычного DOM, включая тех, которые в итоге оказываются в слотах. CSS теневого дерева через ::slotted имеет более высокую специфичность, чем унаследованные стили хоста, если оба правила задают одно и то же свойство.
Распространённые варианты использования
Карточки со слотами для заголовка, основного содержимого и подвала; диалоговые окна со слотами для заголовка, содержимого и действий; элементы списков со слотами для начала и конца; навигационные меню со слотами для элементов. Слоты делают пользовательские элементы составными — так же, как <details>/<summary> или <table>/<tr>.
Проверка знаний
В чём разница между слотом по умолчанию и именованным слотом?
Итоги
Слоты проецируют потомков обычного DOM в определённые места теневого дерева. Слот по умолчанию принимает любого неименованного потомка, а именованные слоты — потомков с соответствующими атрибутами slot. Резервное содержимое заполняет пустые слоты, ::slotted стилизует непосредственных потомков в слотах, а события slotchange позволяют реагировать на динамические обновления содержимого.
Часто задаваемые вопросы
Урок «Элементы slot для распределения содержимого» бесплатный?
Да — полный текст урока «Элементы slot для распределения содержимого» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Элементы slot для распределения содержимого»?
Проецируйте содержимое элемента-хозяина в shadow DOM с именованными и стандартными слотами Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Элементы slot для распределения содержимого»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- attachShadow и корень shadow
- Элементы slot для распределения содержимого
- Изолированные стили внутри Shadow DOM
- part и exportparts для внешней стилизации