Web Components: customElements.define, жизненный цикл, атрибуты и события

Браузеры позволяют создавать компоненты и без React или Vue. Набор этих стандартов называется Web Components: Custom Elements, Shadow DOM и <template>. В этом уроке разберём первую часть — создание собственного HTML-тега.

Что такое custom element

Custom element — это класс, наследующий HTMLElement, и имя, под которым он зарегистрирован (например, <user-badge>). Имя регистрируется в браузере через customElements.define.

class HelloBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from a custom element';
  }
}

customElements.define('hello-badge', HelloBadge);

В HTML вы просто пишете <hello-badge></hello-badge>.

💡 Имя должно быть строчным и обязательно содержать дефис: user-card подходит, UserCard и card — нет. Так имя гарантированно не пересечётся с будущими стандартными тегами HTML.

Колбэки жизненного цикла