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 и доступ к элементу
class Salutation extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h1>Hello World...</h1>`;
this.style.color = "red";
}
}В этом коде мы добавили функцию connectedCallback. Она вызывается, когда элемент отображается в браузере. После того, как компонент появился в браузере и функция вызвана, мы можем получить доступ к элементу с помощью ключевого слова this. В приведённом выше коде мы пытаемся получить доступ к элементу, используя ключевое слово this и обновляя два свойства элемента:
innerHTML.style.color.
Регистрация пользовательского компонента
Чтобы сделать элемент доступным для использования в HTML, нужно определить тег, представляющий этот класс. А чтобы определить пользовательский элемент, нужно применить свойство customElement и определить элемент с его помощью:
class Salutation extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h1>Hello World...</h1>`;
this.style.color = "red";
}
}
customElements.define('salutation-element', Salutation);В этом коде мы регистрируем новый компонент salutation-element, представляющий созданный нами класс. Теперь этот новый компонент salutation-element можно использовать точно так же, как и любой другой HTML-тег.
Применение пользовательского элемента salutation-element
В приведённом выше коде мы регистрируем элемент salutation-element. Этот элемент представлен новым классом salutation, который был определён. Как только элемент зарегистрирован, его можно использовать внутри HTML-страницы:
<!DOCTYPE html>
<html>
<head>
<title>Creating Custom Elements</title>
<script src="./indexOne.js"></script>
</head>
<body>
<salutation-element></salutation-element>
</body>
</html>В этом HTML-файле мы используем пользовательский элемент, который был определён. И теперь этот компонент можно многократно применять внутри HTML-страницы.
В этой «песочнице» можно вносить изменения в функциональность и обновлять пользовательский элемент в соответствии с теми или иными требованиями. Попробуйте!
Можно ещё добавить функциональности для дальнейшего расширения компонента: сделать приветственное сообщение более динамичным, передавая имя, которое будет отображаться внутри приветственного сообщения. Но это уже тема другой статьи.
Читайте также:
- Как создать HTML-таблицу и PDF с Node и Google Puppeteer
- Как написать хороший HTML & CSS код с помощью Webflow
- Множества ES6 в JavaScript. Зачем?
Читайте нас в Telegram, VK и Дзен
Перевод статьи Mayank Gupta: Create Custom HTML Element without any Frontend Framework
