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

Именованные слоты — механизм, позволяющий компонентам Atomico быть более гибкими в размещении и организации вложенного контента. Они расширяют возможности стандартных слотов HTML, позволяя создавать несколько областей для вставки контента с чёткой идентификацией каждой из них.

Создание именованного слота

В Atomico именованный слот создаётся с помощью атрибута name в теге <slot>. Пример базового использования:

import { c, html } from "atomico";

function Card() {
    return html`
        <div class="card">
            <header>
                <slot name="header"></slot>
            </header>
            <section>
                <slot></slot>
            </section>
            <footer>
                <slot name="footer"></slot>
            </footer>
        </div>
    `;
}

Card.props = {};

export const card = c(Card);

В этом примере компонент Card содержит три слота:

  • header — для заголовка карточки
  • дефолтный слот без имени — для основного содержимого
  • footer — для нижней части карточки

Передача контента в именованные слоты

При использовании компонента контент передаётся через атрибут slot у вложенных элементов:

<card>
    <h1 slot="header">Заголовок карточки</h1>
    <p>Основной текст карточки</p>
    <small slot="footer">Подпись</small>
</card>

Элементы h1 и small попадут в соответствующие именованные слоты, а <p> — в дефолтный.

Вложенные и условные слоты

Именованные слоты можно комбинировать с условным рендерингом внутри компонента. Atomico поддерживает использование стандартных возможностей JavaScript для управления наличием слотов:

function Modal({ title, content, footer }) {
    return html`
        <div class="modal">
            ${title ? html`<header><slot name="title">${title}</slot></header>` : null}
            <main>
                <slot>${content}</slot>
            </main>
            ${footer && html`<footer><slot name="footer">${footer}</slot></footer>`}
        </div>
    `;
}

Modal.props = {
    title: String,
    content: String,
    footer: String
};

export const modal = c(Modal);

Таким образом, слот может отображаться только при наличии соответствующего контента.

Дефолтный контент слота

Слот в Atomico может содержать дефолтный контент, который отображается, если внешний компонент не передал контент для данного слота:

<slot name="header">
    <h2>Стандартный заголовок</h2>
</slot>

Если пользователь не передаст контент с slot="header", будет показан <h2> внутри слота.

Динамические слоты

Atomico позволяет создавать динамические слоты через JavaScript и массивы элементов. Например, генерация нескольких областей с уникальными именами:

function Tabs({ tabs }) {
    return html`
        <div class="tabs">
            ${tabs.map(tab => html`
                <div class="tab">
                    <slot name=${tab.name}>${tab.defaultContent}</slot>
                </div>
            `)}
        </div>
    `;
}

Tabs.props = {
    tabs: Array
};

export const tabs = c(Tabs);

Такой подход позволяет создавать компоненты с переменным количеством областей для контента.

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

Именованные слоты можно стилизовать с использованием селекторов ::slotted([name="slotName"]). Пример:

.card ::slotted([slot="header"]) {
    font-size: 1.5rem;
    font-weight: bold;
}

.card ::slotted([slot="footer"]) {
    font-size: 0.85rem;
    color: gray;
}

Селектор ::slotted позволяет применять стили к содержимому слота, но нельзя использовать вложенные селекторы внутри него — только первый уровень элементов.

Особенности и ограничения

  • Слот всегда отображает только элементы, переданные из родительского компонента. Текстовые узлы без тега помещаются в дефолтный слот.
  • Нельзя изменять имя слота динамически через атрибут slot у контента после его рендера. Для динамики необходимо перестроение DOM через реактивные свойства.
  • Вложенные слоты работают как стандартные слоты HTML — содержимое передаётся вниз по дереву компонентов.

Резюме

Именованные слоты в Atomico позволяют:

  • Создавать несколько независимых областей для контента.
  • Задавать дефолтный контент для слотов.
  • Управлять отображением слотов через условный рендеринг.
  • Стилизовать переданный контент с помощью ::slotted.
  • Строить динамические и повторяющиеся области контента.

Эта функциональность делает компоненты Atomico максимально гибкими и модульными, сохраняя чёткое разделение структуры и содержимого.

Оглавление