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

FAST Element — это библиотека для создания веб-компонентов с реактивным состоянием и эффективным связыванием данных. Одной из мощных возможностей является использование именованных слотов, которые позволяют компоновать сложные интерфейсы и задавать контент в определённых областях компонента.

Основы слотов

В HTML слоты — это специальные точки вставки для внешнего контента в шаблоне компонента. Именованный слот отличается тем, что ему присваивается уникальное имя через атрибут name. Контент, переданный в слот с соответствующим атрибутом slot, будет отображаться именно в этом месте.

Пример базового слота:

<template>
  <slot name="header"></slot>
  <div>Основной контент</div>
  <slot name="footer"></slot>
</template>

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

<my-component>
  <h1 slot="header">Заголовок</h1>
  <p>Текст основного контента</p>
  <footer slot="footer">Подвал</footer>
</my-component>

В этом примере <h1> попадёт в слот header, а <footer> — в footer. Контент без указания slot не будет вставлен в именованные слоты.

Объявление именованных слотов в FAST Element

В FAST Element шаблон компонента создаётся через функцию html. Именованные слоты оформляются с помощью slot с атрибутом name.

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

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

const styles = css`
  header { background: #f0f0f0; padding: 10px; }
  footer { background: #f0f0f0; padding: 10px; }
`;

export class MyComponent extends FASTElement {}
MyComponent.define({ name: "my-component", template, styles });

Здесь <slot></slot> без имени служит слотом по умолчанию, в который попадёт весь контент без атрибута slot.

Преимущества именованных слотов

  1. Чёткая структура компонента Именованные слоты позволяют заранее определить, где именно должен отображаться контент разного типа: заголовки, кнопки действий, подвал.

  2. Гибкость при повторном использовании Один и тот же компонент может использоваться с разными комбинациями контента, просто изменяя вложенные элементы с атрибутом slot.

  3. Изоляция контента Слоты отделяют шаблон компонента от внешнего контента, предотвращая вмешательство в структуру DOM.

Реактивность слотов

FAST Element обеспечивает реактивное обновление контента слотов. Если содержимое слота изменяется после рендеринга, компонент автоматически обновляет отображение. Это особенно полезно при динамическом изменении интерфейса.

Пример динамического слота:

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

class DynamicComponent extends FASTElement {
  @observable headerText = "Первоначальный заголовок";
}

const template = html<DynamicComponent>`
  <header>
    <slot name="header">${x => x.headerText}</slot>
  </header>
`;

DynamicComponent.define({ name: "dynamic-component", template });

Изменение headerText обновит содержимое слота без перерисовки всего компонента.

Слоты по умолчанию и fallback-контент

Именованные слоты могут иметь fallback-контент, который отображается, если внешний контент для слота не передан.

<slot name="header">Заголовок по умолчанию</slot>

Если при использовании компонента не передан элемент с slot="header", отображается текст Заголовок по умолчанию.

Вложенные и комбинированные слоты

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

<parent-component>
  <child-component slot="content">
    <p slot="header">Вложенный заголовок</p>
  </child-component>
</parent-component>

Такой подход упрощает организацию компонентов и поддерживает композицию интерфейсов, где каждый элемент управляет своим собственным слотом.

События и слоты

FAST Element позволяет реагировать на изменения в слотах через событие slotchange. Оно вызывается каждый раз, когда содержимое слота обновляется.

const slot = this.shadowRoot.querySelector('slot[name="header"]');
slot.addEventListener('slotchange', () => {
  console.log("Содержимое слота обновлено:", slot.assignedNodes());
});

Метод assignedNodes() возвращает список узлов, переданных в слот, включая текстовые и элементные узлы.

Именованные слоты в FAST Element обеспечивают точное позиционирование и динамическое управление контентом, что делает их незаменимым инструментом при создании гибких, переиспользуемых веб-компонентов. Они поддерживают реактивность, fallback-контент и событийное взаимодействие, что значительно упрощает построение сложных интерфейсов.

Оглавление