Низкоуровневые API

FAST Element предоставляет мощный низкоуровневый API для создания веб-компонентов с высокой производительностью и гибкостью. В основе лежат классы, декораторы и реактивные механизмы, которые позволяют управлять жизненным циклом компонентов, их состоянием и отображением DOM без лишней нагрузки.

Создание элемента

Базовый элемент создаётся через наследование от класса FASTElement:

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

class MyElement extends FASTElement {
    // свойства и методы
}

MyElement.define({
    name: "my-element",
    template: html`<p>Hello, FAST!</p>`,
    styles: css`p { color: blue; }`
});

Ключевые моменты:

  • template задаёт структуру DOM через html шаблон.
  • styles применяет стили через CSS tagged template.
  • Метод define регистрирует компонент как кастомный элемент.

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

Для работы с состоянием используются декораторы свойств:

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

class Counter extends FASTElement {
    @observable count = 0;

    increment() {
        this.count++;
    }
}
  • @observable делает свойство реактивным. Любое изменение автоматически триггерит обновление DOM, если оно связано с шаблоном.
  • Можно отслеживать изменения с помощью наблюдателей:
countChanged(oldValue, newValue) {
    console.log(`Счётчик изменился с ${oldValue} на ${newValue}`);
}

Метод propertyNameChanged вызывается при любом изменении наблюдаемого свойства.

Шаблоны и привязка данных

Шаблоны FAST используют синтаксис привязки данных:

html`<p>${x => x.count}</p>`
  • Односторонняя привязка: от состояния к DOM (${x => x.prop}).
  • Событийная привязка: срабатывает на события DOM:
html`<button @click=${x => x.increment()}>+1</button>`
  • Директивы (if, repeat) позволяют управлять условной отрисовкой и списками:
import { repeat } from "@microsoft/fast-element";

html`
<ul>
  ${repeat(x => x.items, html`<li>${i => i}</li>`)}
</ul>
`

Жизненный цикл компонента

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

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

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

Работа с DOM напрямую

Низкоуровневый API позволяет управлять DOM без шаблонов через методы:

  • this.$fastController.addBinding(binding) – добавляет реактивную привязку.
  • this.$fastController.removeBinding(binding) – удаляет привязку.
  • this.$fastController.update() – вручную триггерит обновление элемента.

Использование $fastController даёт полный контроль над внутренними механизмами обновления и позволяет интегрировать FAST с другими фреймворками.

Композиция элементов

FAST Element поддерживает композицию компонентов, включая вложенные шаблоны и слоты:

html`
<my-element>
    <span slot="header">Заголовок</span>
</my-element>
`
  • Слоты позволяют вставлять пользовательский контент.
  • Внутренние элементы автоматически реагируют на изменение данных родителя, если используются реактивные свойства.

Пользовательские директивы

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

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

export class Highlight extends Directive {
    update(source) {
        this.element.style.backgroundColor = source ? "yellow" : "transparent";
    }
}
  • Директивы подключаются в шаблонах, как встроенные конструкции.
  • Это позволяет отделить логику визуализации от состояния компонента и минимизировать повторяющийся код.

Управление стилями

Стили в FAST поддерживают темизацию и реактивные CSS-переменные:

const styles = css`
    :host {
        display: block;
        --primary-color: blue;
    }
    p {
        color: var(--primary-color);
    }
`;
  • :host позволяет стилизовать корневой элемент компонента.
  • Переменные CSS могут быть динамически изменены через Jav * aScript:
this.style.setProperty("--primary-color", "red");

Интеграция с Shadow DOM

FAST Element работает с Shadow DOM, обеспечивая инкапсуляцию стилей и шаблонов:

class ShadowElement extends FASTElement {
    static shadowOptions = { mode: "open" };
}
  • Можно выбрать open или closed режим.
  • Shadow DOM полностью изолирует внутренние стили от глобальной страницы, что повышает предсказуемость отображения.

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

Низкоуровневый API позволяет:

  • Минимизировать пересчёт шаблонов с помощью реактивных свойств.
  • Управлять обновлением DOM вручную через $fastController.update().
  • Использовать repeat для эффективной отрисовки больших списков с минимальными перерисовками.

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

Оглавление