Создание первого компонента

FAST Element — это библиотека для создания веб-компонентов с декларативным синтаксисом и высокой производительностью. Для начала работы необходимо установить пакет через npm:

npm install @microsoft/fast-element

После установки можно импортировать необходимые функции и классы:

import { FASTElement, html, css, customElement } from "@microsoft/fast-element";
  • FASTElement — базовый класс для всех компонентов.
  • html — шаблонизатор для описания разметки компонента.
  • css — инструмент для создания стилей.
  • customElement — декоратор для регистрации компонента в DOM.

Определение шаблона и стилей

Шаблон компонента создается с помощью функции html. В нем можно использовать привязки данных, события и условные конструкции:

const template = html<MyElement>`
  <div class="container">
    <h1>${x => x.title}</h1>
    <p>${x => x.description}</p>
    <button @click="${x => x.handleClick()}">Нажать</button>
  </div>
`;
  • ${x => x.title} — реактивная привязка к свойству компонента.
  • @click="${x => x.handleClick()}" — синтаксис привязки событий.

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

const styles = css`
  .container {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
  }
  h1 {
    color: #333;
    font-size: 24px;
  }
  button {
    padding: 8px 16px;
    border: none;
    background-color: #0078d4;
    color: white;
    cursor: pointer;
    border-radius: 4px;
  }
  button:hover {
    background-color: #005a9e;
  }
`;

Создание класса компонента

Компонент наследуется от FASTElement. Свойства компонента необходимо объявлять через декоратор @attr или с помощью статического свойства define:

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

@customElement({ name: 'my-element', template, styles })
class MyElement extends FASTElement {
  @attr title = 'Заголовок';
  @attr description = 'Описание компонента';

  handleClick() {
    console.log('Кнопка нажата!');
  }
}
  • @attr автоматически синхронизирует свойства с атрибутами HTML.
  • Методы класса могут использоваться для обработки событий или управления состоянием.

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

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

this.title = 'Новый заголовок';

После изменения значения title в DOM автоматически обновится содержимое <h1> без дополнительных вызовов перерисовки.

Можно создавать вычисляемые свойства и реактивные методы:

get fullDescription() {
  return `${this.title} — ${this.description}`;
}

Привязка ${x => x.fullDescription} в шаблоне будет автоматически пересчитываться при изменении title или description.

Привязка событий и управление состоянием

События привязываются с помощью @event или через стандартные слушатели DOM. Внутри методов компонента можно изменять свойства и вызывать реактивные обновления:

handleClick() {
  this.description = 'Текст обновлен после нажатия';
}

Можно комбинировать несколько событий и свойств для создания интерактивного поведения:

<button @click="${x => { x.handleClick(); x.toggleState(); }}">Нажать</button>

Композиция и повторное использование компонентов

FAST Element позволяет вкладывать компоненты друг в друга. Для этого достаточно зарегистрировать каждый компонент через @customElement и использовать его в шаблоне:

const cardTemplate = html<CardElement>`
  <div class="card">
    <my-element title="${x => x.title}" description="${x => x.description}"></my-element>
  </div>
`;

Такой подход облегчает масштабирование приложений и повторное использование логики и стилей.

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

FAST Element поддерживает условное отображение и циклы через встроенные директивы if и repeat:

const listTemplate = html<MyList>`
  <ul>
    ${x => x.items.map(item => html`<li>${item}</li>`)}
  </ul>
`;
  • Любое изменение массива items автоматически обновляет список в DOM.
  • Для больших списков используется оптимизированный рендеринг с минимальным количеством изменений в DOM.

Поддержка Shadow DOM

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

@customElement({ name: 'my-element', template, styles, shadowOptions: { mode: 'open' } })

Shadow DOM обеспечивает инкапсуляцию CSS и предотвращает конфликт стилей между компонентами.

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

Полный пример минимального рабочего компонента выглядит так:

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

const template = html<MyElement>`
  <div class="container">
    <h1>${x => x.title}</h1>
    <p>${x => x.description}</p>
    <button @click="${x => x.handleClick()}">Нажать</button>
  </div>
`;

const styles = css`
  .container { padding: 20px; border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9; }
  h1 { color: #333; font-size: 24px; }
  button { padding: 8px 16px; border: none; background-color: #0078d4; color: white; cursor: pointer; border-radius: 4px; }
  button:hover { background-color: #005a9e; }
`;

@customElement({ name: 'my-element', template, styles })
class MyElement extends FASTElement {
  @attr title = 'Заголовок';
  @attr description = 'Описание компонента';

  handleClick() {
    this.description = 'Текст обновлен после нажатия';
  }
}

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

Оглавление