Компоненты базового уровня

FAST Element — это библиотека для создания веб-компонентов с высокой производительностью и модульной архитектурой. Она строится на стандартах Web Components и предоставляет расширенные возможности для декларативного управления состоянием, шаблонами и стилями.

В основе FAST Element лежит класс FASTElement, который наследуется при создании собственного компонента. Любой компонент состоит из трёх ключевых частей: шаблон, стиль и логика.

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

const template = html`
  <div class="container">
    <span>${x => x.message}</span>
    <button @click=${x => x.updateMessage()}>Обновить</button>
  </div>
`;

const styles = css`
  .container {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  button {
    padding: 5px 10px;
    cursor: pointer;
  }
`;

class MyComponent extends FASTElement {
  message = "Привет, FAST!";

  updateMessage() {
    this.message = "Сообщение обновлено";
  }
}

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

В этом примере видно несколько ключевых особенностей FAST Element:

  • Декларативное связывание данных: ${x => x.message} обеспечивает реактивное обновление DOM при изменении свойства.
  • Обработчики событий: @click=${x => x.updateMessage()} привязывает метод класса к событию DOM.
  • Инкапсуляция стилей: CSS, определённый через css, применяется только к этому компоненту.

Шаблоны и директивы

FAST Element использует мощную систему шаблонов на основе tagged template literals. Основные возможности включают:

  • Интерполяция свойств: ${x => x.prop}
  • Условное отображение: :if="${x => x.show}"
  • Циклы: repeat(x => x.items, html\
  • ${x => x}
    • )

Пример условного отображения и повторения элементов:

import { repeat } from "@microsoft/fast-element";

const listTemplate = html`
  <ul>
    ${repeat(x => x.items, html`<li>${x => x}</li>`)}
  </ul>
  <div :if="${x => x.items.length === 0}">Список пуст</div>
`;

Реактивные свойства

Свойства компонента, определённые в классе, автоматически становятся реактивными, если они объявлены через обычные поля или через @observable. Любое изменение такого свойства инициирует обновление шаблона.

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

class Counter extends FASTElement {
  @observable count = 0;

  increment() {
    this.count++;
  }
}

FAST Element отслеживает изменения автоматически, что позволяет не писать лишний код для обновления DOM.

Методы жизненного цикла

FAST Element предоставляет стандартные методы жизненного цикла веб-компонентов:

  • connectedCallback() — вызывается при добавлении элемента в DOM.
  • disconnectedCallback() — вызывается при удалении элемента из DOM.
  • adoptedCallback() — при переносе элемента в другой документ.
  • attributeChangedCallback() — при изменении атрибута.

Кроме того, FAST добавляет собственные расширения, например:

  • templateChanged() — срабатывает при изменении шаблона.
  • stylesChanged() — срабатывает при изменении стилей.

Композиция и вложенные компоненты

Компоненты FAST легко объединяются: один компонент может включать другой через обычный HTML, используя определённый тег:

const parentTemplate = html`
  <div>
    <my-component></my-component>
    <my-component message="Второй компонент"></my-component>
  </div>
`;

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

Стилизация и темы

FAST Element поддерживает CSS custom properties и темизацию. Стиль можно задавать как на уровне отдельного компонента, так и через глобальные темы.

const styles = css`
  :host {
    --button-color: blue;
    display: block;
  }
  button {
    background-color: var(--button-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
  }
`;

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

Поддержка атрибутов

FAST Element автоматически синхронизирует атрибуты HTML с реактивными свойствами:

class MyInput extends FASTElement {
  value = "";
}

MyInput.define({
  name: "my-input",
  template: html`<input type="text" :value="${x => x.value}">`,
});

Изменение атрибута в DOM (<my-input value="тест"></my-input>) обновит свойство value и наоборот.

Итог структуры компонента

  1. Импорт FAST Element: FASTElement, html, css
  2. Определение шаблона: html с привязками и директивами
  3. Определение стилей: css с локальной инкапсуляцией
  4. Создание класса: наследование от FASTElement, реактивные свойства, методы
  5. Регистрация компонента: define({ name, template, styles })

Эта структура позволяет создавать масштабируемые, модульные веб-компоненты с минимальными усилиями и высокой производительностью, используя стандарты веб-платформы и возможности FAST Element.

Оглавление