Контекст выполнения

FAST Element — это современная библиотека для создания веб-компонентов, основанных на стандарте Custom Elements. Контекст выполнения играет ключевую роль в поведении компонентов, управлении их состоянием и реактивностью.

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

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

Конструктор (constructor) В конструкторе создаются внутренние свойства компонента и привязываются базовые реактивные механизмы. Здесь нельзя использовать DOM-элементы, так как элемент ещё не добавлен в документ.
connectedCallback Вызывается при добавлении компонента в DOM. На этом этапе можно безопасно взаимодействовать с потомками и внешними атрибутами. Это оптимальное место для инициализации подписок и слушателей событий.
disconnectedCallback Срабатывает при удалении элемента из DOM. Здесь происходит очистка ресурсов: отписка от событий, отмена таймеров и асинхронных операций.
attributeChangedCallback Реагирует на изменения наблюдаемых атрибутов. FAST Element автоматически связывает свойства и атрибуты через реактивные декораторы, что делает этот этап важным для синхронизации состояния компонента с внешними данными.

Контекст исполнения шаблонов

FAST Element использует реактивный шаблонизатор, который строит DOM из декларативного шаблона, заданного через html или css из пакета @microsoft/fast-element. Контекст выполнения шаблона включает:

Компонент как this Все выражения внутри шаблона выполняются в контексте экземпляра компонента. Любое обращение к свойствам автоматически становится реактивным, если они объявлены через @observable или @attr.
Реактивные привязки Связки вида ${x} автоматически подписываются на изменения соответствующих свойств. Изменение свойства инициирует переработку DOM только для связанных узлов, что повышает производительность.
Обработка событий Атрибуты вида @click=${this.handleClick} связывают обработчики событий с экземпляром компонента. Важно помнить, что контекст this внутри методов корректно указывает на компонент благодаря автоматическому биндингу FAST Element.

Контекст при наследовании

При наследовании компонентов FAST Element контекст выполнения сохраняется через цепочку прототипов. Подкласс может переопределять методы жизненного цикла или свойства, при этом базовый функционал остаётся доступным через super.

Особенности наследования:

Шаблон подкласса может использовать все свойства родителя.
Реактивные привязки корректно обрабатывают переопределённые свойства.
Методы жизненного цикла вызываются в правильной последовательности: сначала родительский конструктор, затем конструктор подкласса, после чего connectedCallback родителя и подкласса.

Асинхронные операции и контекст

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

Использовать стрелочные функции для сохранения this.
Для промисов и async/await гарантировать, что компонент ещё существует в DOM перед обновлением состояния.
Использовать встроенные реактивные механизмы, такие как @observable и @attr, чтобы асинхронные изменения автоматически обновляли шаблон без прямого вмешательства в DOM.

Особенности работы с Shadow DOM

Компоненты FAST Element создают shadow root по умолчанию, что изолирует стили и DOM. Контекст выполнения в shadow DOM:

Локальные стили и переменные CSS применяются только внутри shadow root.
Селекторы слотов позволяют взаимодействовать с внешним содержимым, сохраняя реактивность и контекст выполнения.
События всплывают через shadow boundary, поэтому обработчики должны учитывать composed: true для правильного распространения.