Содержимое и слоты

Слот — именованное место для содержимого, которое передаёт пользователь компонента. Слоты позволяют вставить в компонент собственную разметку вместо простого текстового атрибута.

Слот удобен для иконки, подписи, панели действий или содержимого карточки: содержимое меняется, а поведение компонента остаётся прежним.

Пример

Пример показывает подпись библиотечной Smart-кнопки с форматированием:

<sf-button text="Резервная подпись">
  <span slot="text">Сохранить <strong>черновик</strong></span>
</sf-button>

Шаблон кнопки проверяет component.hasSlotContent('text') и берёт содержимое через component.getSlotContent('text'); если его нет, показывает атрибут text.

Правила

• Компонент сам решает, какие слоты поддерживает; список — на странице компонента. Наличие слота у кнопки не обещает такой же слот у других компонентов.
• Базовый класс забирает содержимое слотов до первой отрисовки. Компонент читает его через hasSlotContent(name) и getSlotContent(name). getSlotContent(name) возвращает узел, если он один, массив узлов, если их несколько, или nothing, если слот пуст; любой из этих результатов можно подставить в шаблон html. Код в onConnected() выполняется уже после того, как базовый класс забрал содержимое слотов из детей тега, и среди детей его не найдёт.
• Обёртка, у которой есть только атрибут slot, разворачивается: остаются её дети. Обёртка с любыми другими атрибутами сохраняется целиком вместе со своими обработчиками.
• Если содержимого нет, используется атрибут (у кнопки — text).
• HTML-слот браузерного компонента и slots в JSON-документе композиции — два разных контракта. Допустимые области декларативного типа задаёт его манифест; не объявляйте JSON-слоты только потому, что в шаблоне нашлось похожее имя.
• Собственный компонент заранее задаёт допустимые имена слотов и поведение при отсутствии содержимого. Текст передают как текст или безопасный шаблон; пользовательскую строку не превращают в произвольный HTML.

Смотрите также

• Жизненный цикл — жизненный цикл и порядок вызовов.
• Составные компоненты — составные компоненты и их слоты.