Пользовательские элементы - их проще создать, чем вы думаете

С помощью Пользовательских элементов веб-разработчики могут создавать новые теги HTML, улучшать существующие теги HTML или расширять компоненты, созданные другими разработчиками.

Чтобы определить новый элемент HTML, нам понадобится 🔥 мощь JavaScript!

Определение JavaScript API элемента

Функциональность настраиваемого элемента определяется с помощью ES2015 class, который расширяет HTMLElement.

Расширение HTMLElement гарантирует, что пользовательский элемент наследует весь DOM API, и означает, что любые свойства / методы, которые вы добавляете в класс, становятся частью DOM элемента. интерфейс.

По сути, используйте класс для создания общедоступного API JavaScript для вашего тега.

class OurElement extends HTMLElement {...}

Определение нового элемента

Глобальный customElements используется для определения настраиваемого элемента и обучения браузера новому тегу. Вызовите customElements.define() с именем тега, который вы хотите создать, и JavaScript class, расширяющим базовый HTMLElement

window.customElements.define('our-element', OurElement);

Важно помнить, что использование настраиваемого элемента ничем не отличается от использования <div> или любого другого элемента. Экземпляры могут быть объявлены на странице, созданы динамически в JavaScript, могут быть прикреплены слушатели событий и т. Д.

Жизненный цикл

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

✔️ конструктор - экземпляр элемента создан или обновлен

✔️ connectedCallback - вызывается каждый раз, когда элемент вставляется в DOM.

✔️ disconnectedCallback - вызывается каждый раз, когда элемент удаляется из модели DOM. Полезно для запуска кода очистки.

✔️ attributeChangedCallback - вызывается, когда наблюдаемый атрибут был добавлен, удален, обновлен или заменен. Также вызывается для начальных значений, когда элемент создается парсером или обновляется.

✔️ acceptCallback - Пользовательский элемент перемещен в новый document

Начало работы 👍

Мы создадим все в отдельном файле JavaScript, который будет содержать все о нашем настраиваемом элементе: правила стиля, его разметку, определение класса ES6 и, наконец, зарегистрируем настраиваемый элемент.

В HTML-файлах, где мы хотим использовать наш собственный элемент, все, что нам нужно сделать, это включить этот файл JavaScript, и мы будем готовы начать использовать новый тег на нашей странице

Ниже приведено определение класса для нашего настраиваемого элемента, который должен расширять HTMLElement:

Вот несколько замечаний:

✔️ Конструктор класса - хорошее место для прикрепления теневого корня и определения его внутреннего HTML. Мы вызываем функцию, которая это делает (render (…)).

✔️ Если у класса настраиваемого элемента есть конструктор, вы всегда должны вызывать в нем super ().

✔️ Режим теневого корня может быть как открытым, так и закрытым. Вы, вероятно, будете когда-либо использовать только open, потому что в противном случае вы не сможете установить для него какой-либо innerHTML.

При использовании Shadow DOM вот как будет выглядеть разметка в консоли вашего браузера:

Использование 🔥

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

Однако обратите внимание, что пользовательские элементы всегда должны иметь закрывающий тег:

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

Вы захотите запустить код через транспилятор, такой как Babel для функций JavaScript, которые не поддерживаются повсеместно, например классы ES6 или строковые литералы, и вы захотите использовать полифилы для пользовательских элементов и теневого DOM.

Мы поговорим об использовании полифиллов веб-компонентов в отдельном посте.

Дополнительные ссылки: