Определение элементов с помощью customElements.define
Регистрируйте класс пользовательского элемента в браузере
«Определение элементов с помощью customElements.define» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Что такое пользовательские элементы
Пользовательские элементы позволяют создавать собственные HTML-теги, связанные с классом JavaScript. После определения <my-card> ведёт себя как любой встроенный элемент: его можно записать в HTML, найти, стилизовать, использовать в сценариях и без изменений применять внутри фреймворков.
Требование к дефису
Каждое имя пользовательского элемента должно содержать хотя бы один дефис — user-avatar, app-button, my-card. Дефис отличает пользовательские элементы от существующих и будущих встроенных тегов HTML, и это требование закреплено в спецификации.
Определение класса
Пользовательский элемент — это класс, расширяющий HTMLElement (или встроенный подкласс). Класс может объявлять конструктор и колбэки жизненного цикла. Открытые свойства и методы класса становятся интерфейсом элемента для работы из сценариев.
class MyCard extends HTMLElement {
constructor() {
super();
this.textContent = "Hello from MyCard";
}
}Регистрация с помощью define
customElements.define("my-card", MyCard) регистрирует класс под именем тега. После регистрации каждый существующий и будущий <my-card> в документе преобразуется в экземпляр этого класса.
super() обязателен
Конструктор должен вызвать super() первым оператором, прежде чем обращаться к this. Пропуск super() вызывает ошибку "Failed to construct 'HTMLElement'". Рассматривайте это как стандартное правило конструктора класса JavaScript.
Не обращайтесь к DOM в конструкторе
Конструктор не должен читать атрибуты или дочерние элементы: во время создания они ещё могут быть не разобраны. Перенесите настройку, затрагивающую DOM, в connectedCallback, который срабатывает только после добавления элемента в документ.
Регистрация выполняется один раз
Имя элемента можно зарегистрировать только один раз на странице. Повторное определение того же имени вызывает ошибку NotSupportedError. Во время разработки перезагружайте страницу, чтобы проверить изменения; в рабочей среде регистрируйте каждый компонент один раз при запуске.
Полифиллы
Пользовательские элементы поддерживаются всеми современными браузерами. Для очень старых браузеров (в основном уже не используемых) полифилл webcomponents.js предоставляет резервную реализацию. В новых проектах можно использовать встроенную поддержку и полностью отказаться от полифилла.
Проверка состояния определения
customElements.get("my-card") возвращает класс, если он определён, и значение undefined в противном случае. customElements.whenDefined("my-card") возвращает промис, который разрешается после регистрации элемента; это удобно для кода, которому нужно дождаться определения, загруженного с задержкой.
customElements.whenDefined("my-card").then((Class) => {
console.log("MyCard is ready");
});Использование элемента
После определения используйте элемент так же, как встроенный тег: запишите его в HTML (<my-card></my-card>), создайте через document.createElement("my-card") или создайте экземпляр через new MyCard() и вставьте его. Все три способа создают один и тот же усовершенствованный экземпляр.
Соглашения об именовании
Добавляйте к пользовательским элементам префикс с названием проекта или компании (cd-card, app-modal), чтобы избежать конфликтов с другими библиотеками на той же странице. Экосистема веб-компонентов не объединяется в один пакет: любой код на вашей странице может зарегистрировать любое имя, и преимущество получает первая регистрация.
Проверьте знания
Почему каждое имя пользовательского элемента должно содержать дефис?
Итоги
Пользовательские элементы — это классы JavaScript, расширяющие HTMLElement и регистрируемые через customElements.define("name", Class), причём имя должно содержать дефис. Конструктор должен сначала вызвать super() и не должен читать DOM; отложите работу с DOM до connectedCallback. Определённые элементы везде ведут себя точно так же, как встроенные теги.
Часто задаваемые вопросы
Урок «Определение элементов с помощью customElements.define» бесплатный?
Да — полный текст урока «Определение элементов с помощью customElements.define» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Определение элементов с помощью customElements.define»?
Регистрируйте класс пользовательского элемента в браузере Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Определение элементов с помощью customElements.define»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Определение элементов с помощью customElements.define
- connectedCallback и disconnectedCallback
- Наблюдаемые атрибуты и attributeChangedCallback
- Расширение встроенных элементов