Источник: Nuances of Programming
HTML5 предоставляет возможность создавать повторно используемые динамические элементы с помощью нескольких строк кода. При этом никакого дополнительного фронтенд-фреймворка не понадобится.
Итак, создадим пользовательский компонент для отображения приветственного сообщения.
Создание пользовательского элемента для отображения «Hello World!».
Сценарий варианта использования: нужно создать пользовательский элемент, который будет отображать «Hello World!» везде, где он задействуется.
Этапы создания пользовательского HTML-элемента:
- Создаём новый класс, представляющий новый элемент.
- Расширяем класс из HTMLElement.
- Добавляем в класс функцию connectedCallback для доступа к элементу DOM при добавлении элемента в документ.
- Получаем доступ к пользовательскому элементу DOM с помощью ключевого слова this.
- Используем элемент DOM для доступа к свойствам элемента и внесения изменений.
- Добавляем в HTML новый, пользовательский элемент.
Создание класса и расширение с помощью HTMLElement
Рассмотрим каждый этап, каждую итерацию и создадим пользовательский компонент для отображения приветственного сообщения «Hello World!». Это будет компонент многократного использования. То есть везде, где мы задействуем HTML-элемент, он будет выводить «Hello World!».
class CurrentTime extends HTMLElement {
}
В этом коде мы создаём класс с именем Current Time, который расширяется из класса HTMLElement. Затем добавим к классу функцию connectedCallback и настроим свойство innerHTML компонента внутри этой функции с помощью ключевого слова this.
Добавление функции connectedCallback и доступ к элементу
В этом коде мы добавили функцию connectedCallback. Она вызывается, когда элемент отображается в браузере. После того, как компонент появился в браузере и функция вызвана, мы можем получить доступ к элементу с помощью ключевого слова this. В приведённом выше коде мы пытаемся получить доступ к элементу, используя ключевое слово this и обновляя два свойства элемента:
- innerHTML.
- style.color.
Регистрация пользовательского компонента
Чтобы сделать элемент доступным для использования в HTML, нужно определить тег, представляющий этот класс. А чтобы определить пользовательский элемент, нужно применить свойство customElement и определить элемент с его помощью:
этом коде мы регистрируем новый компонент salutation-element, представляющий созданный нами класс. Теперь этот новый компонент salutation-element можно использовать точно так же, как и любой другой HTML-тег.
Применение пользовательского элемента salutation-element
В приведённом выше коде мы регистрируем элемент salutation-element. Этот элемент представлен новым классом salutation, который был определён. Как только элемент зарегистрирован, его можно использовать внутри HTML-страницы:
В этом HTML-файле мы используем пользовательский элемент, который был определён. И теперь этот компонент можно многократно применять внутри HTML-страницы.
В этой «песочнице» можно вносить изменения в функциональность и обновлять пользовательский элемент в соответствии с теми или иными требованиями. Попробуйте!
Можно ещё добавить функциональности для дальнейшего расширения компонента: сделать приветственное сообщение более динамичным, передавая имя, которое будет отображаться внутри приветственного сообщения. Но это уже тема другой статьи.
Читайте также:
Перевод статьи Mayank Gupta: Create Custom HTML Element without any Frontend Framework