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

В Slim.js слоты используются для организации шаблонов компонентов, позволяя вставлять в них динамический контент. Каждый компонент может содержать один или несколько слотов, которые определяют, куда будет помещён контент, переданный при использовании компонента. Слот по умолчанию — это слот, в который помещается любой контент, не назначенный конкретным именованным слотам.

Определение слота по умолчанию

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

Slim.tag('my-card', `
  <div class="card">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- слот по умолчанию -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
`);

В этом примере:

  • <slot name="header"> — именованный слот для заголовка.
  • <slot> — слот по умолчанию для основного содержимого.
  • <slot name="footer"> — именованный слот для подвала.

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

Использование слота по умолчанию

Пример использования компонента с содержимым для слота по умолчанию:

<my-card>
  <p>Основной текст карточки, который попадет в слот по умолчанию.</p>
</my-card>

В результате <p> окажется внутри <main> блока компонента, так как <slot> без имени принимает все элементы, не предназначенные для именованных слотов.

Если одновременно используются именованные слоты и слот по умолчанию, Slim.js автоматически распределяет элементы по соответствующим слотам:

<my-card>
  <span slot="header">Заголовок</span>
  <p>Основной текст</p>
  <span slot="footer">Подвал</span>
</my-card>
  • <span slot="header"> попадёт в слот header.
  • <p> попадёт в слот по умолчанию.
  • <span slot="footer"> попадёт в слот footer.

Контент по умолчанию для слота

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

Slim.tag('my-message', `
  <div class="message">
    <slot>Сообщение отсутствует</slot>
  </div>
`);

В этом случае, если <my-message> используется без внутреннего контента, в слот по умолчанию подставится текст "Сообщение отсутствует". Если же контент передан, он заменяет этот текст.

Ограничения и особенности слота по умолчанию

  1. Один слот по умолчанию на компонент. Слот без имени может присутствовать в компоненте только один раз. Наличие нескольких слотов без имени приведёт к неопределённому поведению.

  2. Приоритет именованных слотов. Контент с атрибутом slot="имя" никогда не попадёт в слот по умолчанию.

  3. Реактивность. Slim.js автоматически обновляет содержимое слота при изменении DOM внутри компонента. Любые элементы, добавленные динамически через JavaScript, будут корректно отображены в слоте по умолчанию.

Динамическая вставка контента

Слот по умолчанию поддерживает динамическую вставку с использованием Slim.js реактивных выражений. Например:

Slim.tag('user-card', `
  <div class="user-card">
    <slot>
      <p>{{ defaultMessage }}</p>
    </slot>
  </div>
`, class UserCard {
  defaultMessage = "Информация недоступна";
});

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

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

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

Slim.tag('container-box', `
  <div class="box">
    <slot>
      <div class="inner-box">
        <slot>Вложенный текст по умолчанию</slot>
      </div>
    </slot>
  </div>
`);

При этом внешняя вставка заменяет весь внешний слот, а внутренний слот по умолчанию используется только при отсутствии вложенного контента.

Практические рекомендации

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

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

Оглавление