Слот по умолчанию

Слот по умолчанию в Atomico используется для передачи вложенного контента в компонент без необходимости явно указывать имя слота. Это аналог стандартного механизма веб-компонентов, позволяющий создавать гибкие и переиспользуемые компоненты.

import { c, useShadowDom } from "atomico";

function Card({ children }) {
    useShadowDom();

    return (
        <div class="card">
            {children}
        </div>
    );
}

customElements.define("x-card", c(Card));

В этом примере children автоматически собирает все элементы, переданные внутрь <x-card>. Это и есть слот по умолчанию: если не указан конкретный слот, содержимое помещается в него.

Синтаксис использования

Содержимое по умолчанию вставляется в компонент следующим образом:

<x-card>
    <h2>Заголовок</h2>
    <p>Описание карточки</p>
</x-card>

Компонент Card автоматически поместит <h2> и <p> внутрь контейнера .card. Если внутри компонента есть несколько слотов, неименованные элементы попадут в слот по умолчанию.

Вложенные слоты

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

function Modal({ children }) {
    useShadowDom();

    return (
        <div class="modal">
            <div class="modal-content">
                {children}
            </div>
        </div>
    );
}

customElements.define("x-modal", c(Modal));
<x-modal>
    <p>Основной текст модального окна</p>
    <x-card>
        <h3>Вложенная карточка</h3>
        <p>Содержимое карточки</p>
    </x-card>
</x-modal>

Здесь <p> и <x-card> будут вставлены в слот по умолчанию Modal, а внутри <x-card> свои элементы попадут в слот по умолчанию этого компонента. Таким образом достигается композиция компонентов с автоматическим управлением контентом.

Доступ к слоту по умолчанию через children

В Atomico все элементы слота по умолчанию доступны через свойство children. Оно является массивом или коллекцией узлов, что позволяет применять к нему методы массива или React-подобные операции.

function List({ children }) {
    useShadowDom();

    return (
        <ul>
            {children.map((child, index) => (
                <li key={index}>{child}</li>
            ))}
        </ul>
    );
}

customElements.define("x-list", c(List));
<x-list>
    <span>Элемент 1</span>
    <span>Элемент 2</span>
    <span>Элемент 3</span>
</x-list>

В этом примере каждый дочерний элемент <span> автоматически превращается в <li> благодаря доступу через children.

Сочетание именованных и по умолчанию слотов

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

function Layout({ children, header, footer }) {
    useShadowDom();

    return (
        <div class="layout">
            <header>{header}</header>
            <main>{children}</main>
            <footer>{footer}</footer>
        </div>
    );
}

customElements.define("x-layout", c(Layout));
<x-layout>
    <div slot="header">Заголовок страницы</div>
    <p>Основной контент страницы</p>
    <div slot="footer">Подвал страницы</div>
</x-layout>

Элемент <p> не имеет атрибута slot и автоматически попадает в слот по умолчанию Layout. Это демонстрирует удобство использования слота по умолчанию для основного контента.

Работа с условным контентом

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

function Tooltip({ children }) {
    useShadowDom();

    return (
        <div class="tooltip">
            {children.length ? children : <span>Подсказка отсутствует</span>}
        </div>
    );
}

customElements.define("x-tooltip", c(Tooltip));
<x-tooltip></x-tooltip>
<x-tooltip>Текст подсказки</x-tooltip>

Первый <x-tooltip> отобразит текст по умолчанию, второй — переданный пользователем. Такой подход повышает гибкость компонентов.

Итоговые особенности слота по умолчанию

  • Автоматическое размещение контента без указания имени слота.
  • Доступ через children, что позволяет манипулировать содержимым как массивом узлов.
  • Совместимость с именованными слотами, что делает компонент более структурированным.
  • Поддержка вложенности, позволяя создавать композиции из нескольких компонентов.
  • Условная отрисовка, позволяющая задавать дефолтный контент при отсутствии переданных элементов.

Слот по умолчанию в Atomico является ключевым инструментом для построения гибких и модульных компонентов, особенно когда требуется обрабатывать произвольный пользовательский контент.

Оглавление