JavaScript Academy · Урок

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

Регистрируйте элементы с помощью API customElements.

«Определение пользовательских элементов» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое пользовательские элементы

Пользовательские элементы позволяют определять собственные теги HTML, реализованные классами JavaScript. Вместо создания «каши» из элементов div Вы создаёте повторно используемый автономный компонент, например <user-card>.

Они являются частью стандарта веб-компонентов.
Они работают в браузерах без дополнительных средств, специальная библиотека не требуется.
Имя пользовательского элемента должно содержать дефис, например my-button.

Реестр customElements

Браузер предоставляет глобальный реестр по адресу window.customElements. Зарегистрировать новый тег можно вызовом customElements.define(name, constructor).

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

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

Расширение стандартного элемента HTML

Пользовательский элемент — это класс, расширяющий HTMLElement. Базовый класс предоставляет элементу все стандартные возможности DOM: атрибуты, события и стили.

Всегда сначала вызывайте super() в конструкторе, чтобы элемент был правильно инициализирован.

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

Отображение содержимого

Внутри элемента можно задать this.innerHTML или использовать методы DOM для создания содержимого. Распространённый подход — отображать содержимое, когда элемент подключается к странице.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

Использование элемента в HTML

После регистрации используйте свой тег так же, как любой встроенный элемент. Его можно разместить непосредственно в разметке или создать с помощью document.createElement.

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

Правила конструктора

Конструктор выполняется при создании экземпляра. Действуют строгие правила:

Сначала вызовите super().
Не проверяйте и не добавляйте здесь атрибуты или дочерние элементы.
Перенесите работу с DOM в connectedCallback.

Используйте конструктор только для задания начального состояния и настройки обработчиков событий.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

Добавление поведения

Поскольку Ваш элемент является настоящим узлом DOM, Вы можете добавлять обработчики событий и обновлять его содержимое в ответ на взаимодействие.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

Требование к дефису

Имена пользовательских элементов должны содержать дефис. Это гарантирует, что они никогда не будут конфликтовать с существующими или будущими встроенными элементами HTML.

my-widget допустимо.
mywidget недопустимо и вызывает ошибку.
Имена не зависят от регистра, но записываются строчными буквами.

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined и get

Два полезных метода реестра:

customElements.get(name) возвращает конструктор или undefined, если элемент не зарегистрирован.
customElements.whenDefined(name) возвращает Promise, который выполняется после определения элемента.

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

Определение только один раз

Каждое имя можно зарегистрировать только один раз. Вызов define с уже использованным именем вызывает ошибку. В общих модулях защищайтесь от повторной регистрации.

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

Почему важны пользовательские элементы

Пользовательские элементы предоставляют независимый от фреймворка, изолированный и повторно используемый пользовательский интерфейс. Они:

Стандартизируют повторное использование компонентов в любом стеке.
Интегрируются с собственным жизненным циклом браузера.
Естественно сочетаются с теневым DOM и шаблонами (их мы рассмотрим позже).

Быстрая проверка

Проверьте, насколько Вы поняли определение пользовательских элементов.

Повторение

Вы научились определять пользовательские элементы:

customElements.define(name, class) регистрирует тег.
Класс extends HTMLElement и сначала вызывает super().
Имена должны содержать дефис.
Выводите содержимое в connectedCallback, а не в конструкторе.
get и whenDefined помогают проверить состояние регистрации.

Далее мы изучим полный жизненный цикл пользовательского элемента.

Часто задаваемые вопросы

Урок «Определение пользовательских элементов» бесплатный?

Да — полный текст урока «Определение пользовательских элементов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Определение пользовательских элементов»?

Регистрируйте элементы с помощью API customElements. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Определение пользовательских элементов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy