Регистрация компонентов

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

Определение пользовательского элемента

В основе любого компонента FAST Element лежит класс, наследуемый от FASTElement. Создание нового компонента начинается с объявления класса:

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

class MyComponent extends FASTElement {
  firstName = '';
  lastName = '';
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

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

  • Свойства класса автоматически могут связываться с DOM через синтаксис биндинга.
  • Методы класса доступны внутри шаблона и могут использоваться для вычисляемых значений.

Шаблон компонента

Для визуальной части компонента создается шаблон с помощью функции html:

const myComponentTemplate = html<MyComponent>`
  <div>
    <p>Имя: ${x => x.firstName}</p>
    <p>Фамилия: ${x => x.lastName}</p>
    <p>Полное имя: ${x => x.fullName}</p>
  </div>
`;

Особенности шаблона:

  • Синтаксис ${x => x.property} позволяет автоматически отслеживать изменения свойств и обновлять DOM.
  • В шаблоне можно использовать условные конструкции и циклы через специальные директивы FAST (if, repeat).

Стилизация компонентов

Стили для компонента оформляются с использованием функции css:

const myComponentStyles = css`
  p {
    font-family: Arial, sans-serif;
    color: #333;
  }

  div {
    border: 1px solid #ccc;
    padding: 10px;
  }
`;

Особенности CSS:

  • Стили применяются только к компоненту, благодаря Shadow DOM.
  • Можно использовать переменные CSS и миксины, что повышает гибкость оформления.

Регистрация компонента

Регистрация компонента выполняется с помощью функции FASTElement.define. Она связывает тег HTML с классом и шаблоном:

import { FASTElement, FASTElementDefinition } from '@microsoft/fast-element';

FASTElement.define({
  name: 'my-component',
  template: myComponentTemplate,
  styles: myComponentStyles,
  shadowOptions: {
    mode: 'open'
  }
});

Параметры регистрации:

  • name — уникальное имя HTML-тега. Должно содержать дефис, например my-component.
  • template — шаблон компонента, созданный функцией html.
  • styles — стили компонента, созданные функцией css.
  • shadowOptions — настройки Shadow DOM. По умолчанию режим open, но возможен closed.

Использование зарегистрированного компонента

После регистрации компонент становится доступным как обычный HTML-элемент:

<my-component></my-component>

Изменение свойств через JavaScript автоматически отражается в шаблоне:

const element = document.querySelector('my-component');
element.firstName = 'Иван';
element.lastName = 'Иванов';

Расширенные возможности регистрации

  1. Передача настроек Shadow DOM Позволяет управлять режимом и делегированием событий:
FASTElement.define({
  name: 'my-component',
  template: myComponentTemplate,
  styles: myComponentStyles,
  shadowOptions: {
    mode: 'open',
    delegatesFocus: true
  }
});
  1. Использование глобальных шаблонов и стилей Можно создавать общие шаблоны и миксины стилей для повторного использования:
import { html, css } from '@microsoft/fast-element';

export const baseTemplate = html<MyComponent>`<slot></slot>`;
export const baseStyles = css`p { margin: 0; }`;
  1. Регистрация с настройками по умолчанию FAST Element позволяет определить значения свойств по умолчанию через статический объект defaultValues:
class MyComponent extends FASTElement {
  static defaultValues = {
    firstName: 'Имя',
    lastName: 'Фамилия'
  };
}

Совместимость с Web Components

FAST Element полностью интегрируется с нативной спецификацией Web Components. После регистрации компонента можно использовать все стандартные возможности:

  • События (addEventListener)
  • Атрибуты (setAttribute, getAttribute)
  • Методы жизненного цикла (connectedCallback, disconnectedCallback)

Динамическая регистрация

Компоненты можно регистрировать динамически на основе условий:

if (!customElements.get('my-component')) {
  FASTElement.define({
    name: 'my-component',
    template: myComponentTemplate,
    styles: myComponentStyles
  });
}

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

Взаимодействие компонентов

Зарегистрированные компоненты могут взаимодействовать между собой через:

  • Свойства и атрибуты
  • События CustomEvent
  • Слоты и композицию шаблонов

Пример передачи данных через события:

class MyComponent extends FASTElement {
  sendData() {
    this.dispatchEvent(new CustomEvent('data-sent', { detail: { value: 42 }, bubbles: true }));
  }
}

Итоговые рекомендации по регистрации

  • Всегда проверять уникальность имени компонента.
  • Использовать Shadow DOM для изоляции стилей.
  • Определять шаблон и стили перед регистрацией.
  • При необходимости использовать динамическую регистрацию для избежания конфликтов.

Регистрация компонентов в FAST Element является фундаментом для построения масштабируемых, реактивных и модульных пользовательских интерфейсов на базе современных стандартов Web Components.

Оглавление