Слоты в Svelte — руководство по использованию, именованию и переадресации

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

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

Короткое определение: слот — это точка расширения в шаблоне компонента, куда передаётся внешний контент.

Важно: слоты управляют разметкой и композицией, но не заменяют модель данных. Для передачи данных внутрь компонента используйте пропсы; для передачи данных из дочернего к родителю применяют slot props (см. ниже).

Базовый слот: создание и использование

Чтобы объявить слот в Svelte, вставьте тег в шаблон компонента. По умолчанию в него попадёт весь дочерний контент между тегами компонента.

Пример дочернего компонента (Child.svelte):

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

Пример родителя (Parent.svelte), который передаёт контент:

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

Запасной контент (fallback)

Если родитель ничего не передал, слот может отобразить запасной контент:

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

Если родитель позже вставит контент, запасной текст заменится реальным вложением.

Передача данных через slot props (когда дочерний делится с родителем)

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

Child.svelte:

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

Parent.svelte:

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

      Дочерний компонент говорит: {message}
    
  

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

Child.svelte:

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

Parent.svelte:

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

      Имя пользователя: {firstName} {lastName}
    
  

Совет: именуйте slot props ясно (message, item, index), чтобы интерфейс компонента был очевиден.

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

Если компонент принимает несколько областей, используйте именованные слоты. В дочернем компоненте даёте , а в родителе помечаете элемент атрибутом slot=”…”.

Child.svelte:

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

Parent.svelte:

  
    Это попадёт в header
    Это попадёт в footer
  

Именованные слоты делают компонент предсказуемым и позволяют задать структуру (например: header, body, footer).

Переадресация слота (slot forwarding)

Переадресация нужна, когда у вас есть обёртка (wrapper), а внутренняя цель — ещё глубже. Wrapper принимает содержимое от родителя и пробрасывает его в дочерний компонент.

Child.svelte:

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

Wrapper.svelte:

Parent.svelte:

  
    
Это из родителя
  

В результате содержимое родителя проходит через Wrapper и помещается в slot с именем “message” у Child.

Когда слоты — не лучшая идея

• Вы хотите просто передать данные, а не макет: используйте props.
• Нужна глобальная или межкомпонентная передача состояния: рассмотрите store или context API.
• Требуется строгая типизация интерфейса: слоты дают гибкость, но это может затруднить проверку контрактов.

Пример «неудачи»: если дизайн компонента заранее фиксирован и требует только небольшой вариативности (например, одно поле с текстом), добавление слота усложнит контракт без пользы.

Альтернативы и сравнение (в двух словах)

• Props: для передачи данных сверху вниз, простая и явная модель.
• Context API: для передачи данных глубоко в дерево без проброса через каждый компонент.
• Stores: для глобального состояния и реактивности между любыми компонентами.
• Слоты: для передачи разметки и композиции, а также для обмена UI-фрагментами.

Выбор: если вам нужна гибкая разметка — слоты. Если требуется только значение — пропсы или сто́ры.

Мини-методология: как проектировать компонент со слотами

1. Определите зоны расширения: header, body, footer, actions.
2. Нужны ли данные от дочернего к родителю? Если да — запланируйте slot props.
3. Есть ли промежуточные обёртки? Если да — спроектируйте переадресацию слотов.
4. Добавьте запасной контент для устойчивости.
5. Документируйте интерфейс: какие имена слотов, какие slot props доступны.

Короткий SOP:

• Шаг 1: нарисуйте макет и отметьте точки вставки.
• Шаг 2: выберите имена слотов и список slot props.
• Шаг 3: реализуйте и напишите примеры использования.
• Шаг 4: напишите тесты для случаев с и без вставленного контента.

Рекомендации и чеклист по ролям

Frontend-разработчик:

• Явно документируйте каждый слот и slot prop.
• Дайте запасной контент.
• Не смешивайте назначение слота и логики состояния.

Код-ревьювер:

• Проверяйте читаемость API: имена слотов и props.
• Убедитесь, что нет неявных зависимостей на контекст.
• Проверьте доступность (a11y) при динамическом контенте.

UX/UI дизайнер:

• Обозначьте область, где контент может менять высоту.
• Проверьте, как запасной контент влияет на вёрстку.

Примеры тест-кейсов (приёмка)

• Рендер без вложений: показывает запасной контент.
• Рендер с простым вложением: содержимое отображается корректно.
• Передача slot props: родитель получает данные через let:prop.
• Именованные слоты: все области рендерятся в правильных местах.
• Переадресация: содержимое родителя попадает в глубинный слот.

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

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

Краткий словарь

• Слот (slot) — точка вставки разметки в шаблоне компонента.
• Slot prop — пропы, передаваемые дочерним компонентом в слот.
• Именованный слот — слот с атрибутом name для многозонной композиции.
• Переадресация слота — проброс контента через обёртку в дочерний компонент.

Итог

Слоты дают мощный механизм для создания повторно используемых, настраиваемых компонентов в Svelte. Они особенно полезны, когда вам нужно контролировать разметку внутри компонентов, но при этом оставить возможность внешней настройки. Продумывайте API слотов, документируйте имена и slot props, и комбинируйте слоты с fallback-контентом и альтернативами (props, context, stores) там, где это логичнее.

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

Summary

• Слоты отвечают за композицию UI и вставку разметки из родителя в дочерний компонент.
• Slot props позволяют дочернему компоненту передавать данные в контейнерный контент.
• Именованные слоты и переадресация помогают строить сложные, модульные компоненты.
• Выбирайте между слотами, пропсами, context и store в зависимости от задачи.