Создание пользовательского HTML-элемента без фронтенд-фреймворка

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

Итак, создадим пользовательский компонент для отображения приветственного сообщения.

Создание пользовательского элемента для отображения «Hello World!».

Сценарий варианта использования: нужно создать пользовательский элемент, который будет отображать «Hello World!» везде, где он задействуется.

Этапы создания пользовательского HTML-элемента:

  1. Создаём новый класс, представляющий новый элемент.
  2. Расширяем класс из HTMLElement.
  3. Добавляем в класс функцию connectedCallback для доступа к элементу DOM при добавлении элемента в документ.
  4. Получаем доступ к пользовательскому элементу DOM с помощью ключевого слова this.
  5. Используем элемент DOM для доступа к свойствам элемента и внесения изменений.
  6. Добавляем в 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 и обновляя два свойства элемента:

  1. innerHTML.
  2. 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-страницы.

В этой «песочнице» можно вносить изменения в функциональность и обновлять пользовательский элемент в соответствии с теми или иными требованиями. Попробуйте!

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

Читайте также:

Читайте нас в Telegram, VK и Яндекс.Дзен


Перевод статьи Mayank Gupta: Create Custom HTML Element without any Frontend Framework

Предыдущая статья10 идиоматических приемов для эффективного программирования на Python
Следующая статьяКак увеличить производительность CSS-in-JS в 175 раз