JavaScript Academy · Урок

Шаблоны и слоты

Составляйте компоненты с помощью template и slot.

«Шаблоны и слоты» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Элемент шаблона

Элемент <template> содержит неактивный HTML, который разбирается, но не отображается. Его содержимое остаётся за пределами страницы, пока Вы не клонируете и не вставите его, поэтому этот элемент идеально подходит для повторно используемой разметки.

Доступ к содержимому шаблона

Дочерние элементы шаблона находятся в его свойстве .content, которое является DocumentFragment. Скрипты, изображения и стили внутри него не выполняются и не загружаются, пока шаблон не будет вставлен.

// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment

Клонирование шаблона

Используйте importNode или cloneNode(true), чтобы скопировать содержимое шаблона, а затем вставьте клон. Клонирование позволяет недорого создавать множество копий.

const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);

Шаблоны внутри компонентов

Пользовательские элементы часто определяют шаблон один раз и при каждом создании экземпляра клонируют его в корень теневого DOM. Это быстрее, чем каждый раз заново разбирать строку HTML.

const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';

class MyCard extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.appendChild(tpl.content.cloneNode(true));
  }
}
customElements.define('my-card', MyCard);

Что такое слот

<slot> — это заполнитель внутри теневого дерева, куда проецируется собственное дочернее содержимое элемента — его обычный DOM. Это позволяет пользователям передавать в Ваш компонент собственное содержимое.

// Shadow root markup:
// <div class="box"><slot></slot></div>

// Usage:
// <my-card>This text fills the slot</my-card>

Содержимое слота по умолчанию

Содержимое между тегами <slot> выступает в качестве резервного варианта. Оно отображается только тогда, когда пользователь не предоставляет подходящее содержимое.

// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.

Именованные слоты

Несколько слотов могут сосуществовать благодаря атрибуту name. Дочерние элементы обычного DOM направляются в слот с помощью атрибута slot.

// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>

// Usage:
// <my-card>
//   <h2 slot="title">Hello</h2>
//   <p slot="body">World</p>
// </my-card>

Слот по умолчанию (без имени)

Слот без name является слотом по умолчанию. Любой дочерний элемент без атрибута slot проецируется в него. Можно сочетать один слот по умолчанию с несколькими именованными слотами.

// <slot name="header"></slot>
// <slot></slot>  <!-- default: catches everything else -->

Стилизация содержимого слотов

Используйте псевдоэлемент ::slotted(), чтобы стилизовать проецируемые дочерние элементы из стилей теневого DOM. Он выбирает только узлы слотов верхнего уровня.

// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }

Событие slotchange

Слот вызывает событие slotchange, когда назначенные ему узлы изменяются. Слушайте это событие, чтобы реагировать на добавление или удаление пользователями проецируемого содержимого.

const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
  const nodes = slot.assignedNodes();
  console.log('slot now has', nodes.length, 'nodes');
});

Шаблоны и слоты вместе

Шаблоны один раз определяют структуру, а слоты делают её гибкой, позволяя потребителям внедрять собственное содержимое. Вместе они обеспечивают чистые, повторно используемые и настраиваемые веб-компоненты.

Быстрая проверка

Проверьте, насколько Вы поняли шаблоны и слоты.

Повторение

Вы изучили шаблоны и слоты:

<template> хранит неактивную повторно используемую разметку в .content.
Клонируйте с помощью cloneNode(true) перед вставкой.
<slot> проецирует обычный DOM в теневое дерево.
В именованных слотах используются name и атрибут slot дочернего элемента.
::slotted() стилизует проецируемые узлы, а slotchange реагирует на обновления.

Вы завершили изучение веб-компонентов. Далее — программный интерфейс наблюдателя пересечений.

Часто задаваемые вопросы

Урок «Шаблоны и слоты» бесплатный?

Да — полный текст урока «Шаблоны и слоты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Шаблоны и слоты»?

Составляйте компоненты с помощью template и slot. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Шаблоны и слоты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy