Частые ошибки

Неправильное определение компонента Одной из распространённых проблем является некорректная регистрация кастомного элемента. В FAST Element компонент создаётся с помощью функции FASTElement.define() или декораторов @customElement. Часто допускают ошибки в названии элемента:

  • использование заглавных букв в имени тега (MyButton вместо my-button);
  • отсутствие дефиса в названии (button вместо my-button).

Такие ошибки приводят к тому, что браузер не распознаёт элемент как кастомный, и он не рендерится.

Ошибки в шаблоне HTML FAST Element использует html и css шаблоны для определения структуры и стилей компонента. Часто встречаются следующие ошибки:

  • забывают импортировать html и css из FAST библиотеки;
  • пытаются использовать обычные строки вместо шаблонных литералов с html:
const template = "<div>${this.text}</div>"; // ❌
const template = html`<div>${this.text}</div>`; // ✅
  • вставка динамических выражений вне ${}, что приводит к их игнорированию.

Неправильное использование реактивных свойств FAST Element обеспечивает реактивность через декораторы @observable или функцию observable(). Основные ошибки:

  • определение свойства без реактивности: оно не обновляет DOM при изменении;
  • попытка напрямую изменить объект или массив без использования методов, поддерживающих отслеживание изменений (push, splice не всегда отслеживаются, нужно использовать Observable.notify при изменениях сложных структур);
  • неинициализированные свойства приводят к undefined в шаблоне.

Пример корректного объявления свойства:

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

class MyElement extends FASTElement {
  @observable text = "Привет";
}

Проблемы с жизненным циклом FAST Element предоставляет хуки жизненного цикла: connectedCallback, disconnectedCallback, attributeChangedCallback, updated(). Типичные ошибки:

  • использование connectedCallback без вызова super.connectedCallback(), что ломает внутреннюю логику FAST;
  • попытка доступа к DOM-элементам до того, как они были отрендерены;
  • неправильно реализован updated() — изменение свойств внутри него без проверки changedProperties может вызвать бесконечный цикл ререндеринга.

Ошибки при работе со стилями FAST Element поддерживает локальные стили через css шаблоны и Shadow DOM. Часто встречаются следующие проблемы:

  • попытка применять глобальные селекторы к Shadow DOM элементам;
  • дублирование стилей между компонентами без использования design system, что увеличивает размер кода;
  • использование обычных CSS-переменных без предварительного объявления:
:host {
  color: var(--primary-color); /* ❌ если переменная не задана */
}

Некорректная работа с событиями FAST Element облегчает создание и прослушивание событий через @event и обычные DOM-события. Ошибки:

  • не удаляются обработчики при disconnectedCallback, что приводит к утечкам памяти;
  • попытка вызвать событие на несуществующем элементе;
  • неправильная работа с кастомными событиями: не задан bubbles или composed, что препятствует всплытию.

Пример корректного создания события:

this.$emit('my-event', { detail: this.text });

Неправильное использование слотов FAST Element поддерживает слоты для вставки контента. Ошибки включают:

  • отсутствие атрибута slot на вставляемом элементе, что приводит к неправильному размещению;
  • ожидание доступа к слоту до полной инициализации компонента;
  • попытка динамически менять слоты без вызова методов ререндеринга.

Ошибки при работе с реактивными списками При использовании repeat() для динамических списков часто встречаются ошибки:

  • изменение массива без использования методов, отслеживаемых FAST, что не обновляет DOM;
  • неуникальные ключи элементов (key), что вызывает неправильное обновление элементов;
  • вставка сложных объектов без сериализации или корректного биндинга свойств.

Пример корректного использования repeat:

html`
  <ul>
    ${repeat(this.items, item => item.id, item => html`<li>${item.name}</li>`)}
  </ul>
`

Игнорирование типизации и проверки данных Хотя FAST Element написан на TypeScript, многие проекты используют JavaScript без строгой проверки типов. Это приводит к:

  • передаче undefined или null в шаблон, что ломает отображение;
  • неправильной работе реактивных свойств, если ожидается конкретный тип;
  • отсутствию предупреждений о несоответствии типов в методах и событиях.

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

Оглавление