Svelte: слоты, именованные слоты и slot props

Логотип Svelte на фоне ноутбука MacBook

Важно: слоты не заменяют props и контекст — они дополняют их. Выбирайте слот, если нужно вставить HTML/компонент с собственной структурой.

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

Слот — это плейсхолдер внутри шаблона дочернего компонента, куда родитель может вставить произвольное содержимое: текст, HTML или другие компоненты. Это похоже на концепцию слотов в Vue: компонент предоставляет «ячейку», а пользователь заполняет её.

Краткое определение: слот — способ передать разметку из родителя в ребёнка.

Простая реализация слота

В дочернем компоненте используйте элемент как маркер места для вставки:


  Это дочерний компонент

В родителе компонент подключается не самозакрывающимся тегом, а парой тегов, внутри которых пишется контент:




  Это родительский компонент
  
    Это сообщение от родителя

Если родитель ничего не передаёт, слот можно снабдить запасным содержимым (fallback):


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

Передача данных через slot props

Иногда нужно, чтобы дочерний компонент предоставил данные тому куску разметки, который ему вставили через слот. Для этого дочерний компонент объявляет переменные и передаёт их в слот как props:




  Это дочерний компонент

Родитель получает доступ к этим значениям через синтаксис let:имя:




  Это родительский компонент
  
    Дочерний компонент говорит: {message}

Можно передавать несколько пропсов:




  Это дочерний компонент

В родителе:




  Это родительский компонент
  
    Имя пользователя: {firstName} {lastName}

Именованные слоты для нескольких областей

Если компонент должен предоставлять несколько независимых мест для вставки, используйте именованные слоты. В дочернем компоненте задаются имена:


  Это дочерний компонент

  Header: 
  Footer:

А в родителе помечайте элементы атрибутом slot:




  Это родительский компонент
  
    Текст для header
    Текст для footer

Форвардинг слотов (slot forwarding)

Форвардинг позволяет «прокинуть» содержимое через промежуточный (wrapper) компонент дальше в целевой дочерний компонент. Пример: есть целевой дочерний компонент с именованным слотом message:


  Это дочерний компонент

Wrapper-компонент принимает контент от родителя и вставляет его в слот ребёнка, используя собственный именованный слот:

Родитель передаёт содержимое в wrapper:




  Это родительский компонент
  
    Это от родителя

В результате разметка из родителя попадёт в целевой слот дочернего компонента через оболочку.

Когда слоты — хорошее решение, а когда нет

Используйте слот, когда вы хотите дать пользователю компонента контроль над разметкой (вставить кнопки, заголовки, сложную структуру).
Не используйте слот, если нужно просто передать значение или конфигурацию (используйте props).
Для глобальных данных/состояния лучше подходит контекст (setContext/getContext) или сторы.

Примеры неудачного применения слотов:

Когда требуется строго типизированная структура данных — props лучше читаются и тестируются.
Для простых настраиваемых значений (label, disabled) слоты усложняют API компонента.

Альтернативы и сочетания

Props: для передачи одиночных значений и конфигурации.
Component composition (вложенные компоненты): для четкого API без «черной коробки» разметки.
Context / Stores: для передачи состояния между удалёнными компонентами.

Хорошая практика — комбинировать: props для настроек и слоты для вставки разметки.

Ментальные модели и эвристики

Модель «контейнер vs содержимое»: компонент предоставляет контейнерный шаблон (layout), а слот — это содержимое, которое вы вставляете.
«Контракт» API: props — контракт на данные; слот — контракт на структуру/разметку.
Чем выше уровень абстракции компонента, тем вероятнее слот оправдан (панели, карточки, модалки).

Быстрый чек-лист для разработки

Можно ли описать поведение через пропсы? Если да — используем props.
Нужно ли вставлять произвольную разметку/компоненты? Если да — слот обязателен.
Нужны ли несколько областей? Планируем именованные слоты.
Нужно ли, чтобы ребенок передавал данные в вставленную разметку? Используем slot props.
Нужен форвардинг? Добавляем промежуточные именованные слоты.

Cheatsheet: синтаксис и подводные камни

Простой слот:
Запасное содержимое: Текст по умолчанию
Именованный слот:
Атрибут у вставляемого элемента:
…
Slot prop у ребёнка:
Получение в родителе: …

Подводные камни:

Убедитесь, что используете let:… в родителе только для тех имен, которые действительно передаёт ребёнок.
При форвардинге следите за именами слотов, они должны совпадать между оболочкой и внутренним компонентом.

Decision flow (выбрать между props, slot, context)

flowchart TD
  A[Нужно изменить только значение?] -->|Да| B[Используйте props]
  A -->|Нет| C[Нужно вставить разметку?]
  C -->|Да| D[Используйте slot]
  C -->|Нет| E[Нужен глобальный доступ к данным?]
  E -->|Да| F[Используйте context или store]
  E -->|Нет| B

Критерии приёмки

Компонент корректно рендерит контент родителя в простом слоте.
Запасное содержимое отображается при отсутствии вложений.
Именованные слоты отображают соответствующий контент по имени.
Slot props корректно передаются и доступны в родителе через let:имя.
Форвардинг проходит через промежуточный компонент без потери разметки.

Ролевые чек-листы: разработчик, ревьюер, дизайнер

Разработчик:

Определил, какие области компонента должны быть настраиваемыми.
Добавил запасное содержимое для ключевых слотов.
Покрыл слот props тестами (рендер с разными значениями).

Ревьюер:

Проверяет читаемость API: не слишком ли сложный набор слотов.
Проверяет наличие документированных имен слотов.

Дизайнер:

Предоставляет примеры контента, который вставят через слот (варианты заголовков/кнопок).

Примеры и тест-кейсы

Тест-кейсы:

Вставка простого текста должна отображаться.
Вставка компонента (например, кнопки) должна рендериться и реагировать на события.
Slot prop должен измениться при обновлении значения в ребёнке.

Короткое резюме

Слоты — инструмент для гибкой композиции UI в Svelte. Они подходят, когда нужно дать пользователю компонента свободу в формировании разметки. Используйте props для данных и конфигурации, слоты — для структуры. Применяйте именованные слоты для нескольких областей и slot props для обратной передачи данных. Форвардинг полезен при наличии обёрток.

Если нужно, могу добавить готовые примеры тестов (Jest/Testing Library), шаблоны компонентов для общей библиотеки UI или варианты API для конкретных задач (модалки, карточки, таблицы).