Как работает HTML Custom Elements API и как создать собственный элемент?

Как работает HTML Custom Elements API и как создать собственный элемент?

• Custom Elements — компонент Web Components, предназначенный для создания собственных HTML-тегов
• API расширяет HTML и позволяет добавлять новые элементы с индивидуальным поведением
• Базовый подход — объявить класс, наследующий HTMLElement или другой встроенный элемент
• Внутри класса реализуются методы жизненного цикла:
• constructor — выполняет инициализацию
• connectedCallback — вызывается при добавлении в DOM
• disconnectedCallback — срабатывает после удаления из DOM
• attributeChangedCallback — обрабатывает изменение атрибутов
• Для регистрации применяется customElements.define('имя-элемента', КлассЭлемента);
• В имени пользовательского элемента должен присутствовать дефис (-), чтобы оно не совпадало с нативным HTML-тегом
• Custom Elements удобны для повторного использования компонентов и изоляции UI-логики

При необходимости я также могу составить короткую шпаргалку для устного ответа.

Развёрнутый ответ

Основной ответ

HTML Custom Elements API входит в спецификацию Web Components и позволяет объявлять собственные HTML-теги с уникальной логикой и поведением. Такой подход полезен для модульных и переиспользуемых компонентов с инкапсуляцией, не привязанных к конкретному фреймворку. Сначала создаётся класс, расширяющий HTMLElement, затем новый тег регистрируется в браузере с помощью метода customElements.define.

Основные моменты

• Создание класса элемента: класс наследуют от HTMLElement или стандартного элемента, например HTMLButtonElement, после чего в нём описывают жизненный цикл: connectedCallback, disconnectedCallback, attributeChangedCallback и другие методы. Браузер вызывает их при добавлении элемента в DOM, удалении и изменении атрибутов.
• Регистрация элемента: для этого вызывают customElements.define('имя-элемента', Класс, {extends: 'optional'}). В имени обязательно наличие дефиса, например my-component, который предотвращает конфликт с нативными тегами.
• Использование: зарегистрированный элемент можно разместить в HTML как <my-component></my-component> или создать программно через document.createElement('my-component'). При расширении стандартного тега используется атрибут is.

Практический контекст

В проекты на React 17+ и Vue 3 такие элементы можно интегрировать, что особенно актуально для микрофронтендов и UI-библиотек. Их также используют, чтобы изолировать сложную UI-логику и сохранить совместимость между разными JS-фреймворками и vanilla JS.

Пример базовой регистрации элемента:

class MyElement extends HTMLElement {
connectedCallback() {
this.innerHTML = `<p>Привет из кастомного элемента!</p>`;
}
}
customElements.define('my-element', MyElement);

Таким образом, API Custom Elements даёт стандартизированный способ создавать инкапсулированные переиспользуемые UI-компоненты. Это особенно важно для современных frontend-приложений с высокой модульностью.