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

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

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

В FAST Element слот по умолчанию создаётся с использованием элемента <slot> без атрибута name. Такой слот принимает весь контент, который не назначен в именованные слоты:

import { FASTElement, html, css } from "@microsoft/fast-element";

const template = html<MyElement>`
  <div class="container">
    <slot></slot>
  </div>
`;

const styles = css`
  .container {
    padding: 10px;
    border: 1px solid #ccc;
    display: block;
  }
`;

export class MyElement extends FASTElement {}

При использовании этого компонента в HTML:

<my-element>
  <p>Текст в слоте по умолчанию</p>
</my-element>

Тег <p> будет автоматически помещён внутрь <slot>, так как он не имеет имени.

Важные особенности слота по умолчанию

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

  2. Стилизация содержимого слота Содержимое слота можно стилизовать через ::slotted():

const styles = css`
  ::slotted(p) {
    color: blue;
    font-weight: bold;
  }
`;

Здесь все <p> элементы, помещённые в слот по умолчанию, будут иметь синий цвет и жирный шрифт.

  1. Fallback контент Если слот по умолчанию не получает контент, можно определить резервный контент:
const template = html<MyElement>`
  <div class="container">
    <slot>Контент по умолчанию</slot>
  </div>
`;

В этом случае, когда компонент используется без внутреннего контента, отображается текст "Контент по умолчанию".

  1. Динамическое обновление Слот по умолчанию поддерживает реактивное обновление контента. Если DOM внутри компонента изменяется динамически через JavaScript, изменения автоматически отражаются в слоте.
const el = document.querySelector('my-element');
el.innerHTML = "<p>Новый текст</p>";

Новый параграф сразу отображается внутри слота по умолчанию.

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

Контент слота по умолчанию может содержать элементы, на которые назначены события. FAST Element обеспечивает правильную делегацию событий внутри Shadow DOM. Например:

const template = html<MyElement>`
  <slot></slot>
`;

export class MyElement extends FASTElement {
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', e => {
      console.log('Слот по умолчанию был нажат', e.target);
    });
  }
}

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

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

  • Один слот по умолчанию: в одном компоненте может быть только один слот без имени. Наличие нескольких <slot> без атрибута name приведёт к неопределённому поведению.
  • Наследование стилей: ::slotted() позволяет стилизовать только прямых потомков слота. Вложенные элементы нельзя изменить напрямую через CSS компонента.

Комбинация с именованными слотами

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

const template = html<MyElement>`
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
`;

Использование:

<my-element>
  <p>Основной контент в слоте по умолчанию</p>
  <span slot="header">Заголовок</span>
</my-element>

В этом примере <span> попадёт в именованный слот header, а <p> — в слот по умолчанию.

Заключение по функционалу слота по умолчанию

Слот по умолчанию обеспечивает гибкую вставку контента, резервный текст и поддержку реактивности. Он является базовым инструментом для построения настраиваемых и переиспользуемых компонентов в FAST Element. Понимание механизма слота по умолчанию необходимо для правильного комбинирования с именованными слотами и для корректного применения стилей через ::slotted().

Оглавление