Кастомные элементы (или собственные элементы) - это часть спецификации Web Components, которая позволяет разработчикам создавать собственные HTML-теги. Эти элементы могут быть использованы в любом месте вашего приложения, как стандартные HTML элементы, что делает их основным инструментом для создания переиспользуемых компонентов.

Основные концепции

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

Регистрация кастомного элемента: После создания класса кастомного элемента, его необходимо зарегистрировать с помощью функции customElements.define(). Такой процесс связывает имя элемента с классом.

Использование кастомного элемента: После регистрации кастомных элементов, их можно использовать в HTML, как обычные теги.

Пример кода

Вот простой пример кастомного элемента, который представляет собой элемент "hello-world":

// Определяем класс кастомного элемента
class HelloWorld extends HTMLElement {
  constructor() {
    super();
    // Создаем теневой корень
    const shadow = this.attachShadow({ mode: 'open' });
    // Создаем элементы
    const wrapper = document.createElement('div');
    const text = document.createElement('span');

    // Устанавливаем текст
    text.textContent = 'Привет, мир!';
    wrapper.appendChild(text);
    shadow.appendChild(wrapper);
  }
}

// Регистрируем кастомный элемент
customElements.define('hello-world', HelloWorld);

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

Теперь, когда наш элемент зарегистрирован, мы можем использовать его в любом HTML-файле:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример Кастомного Элемента</title>
    <script src="path/to/your/custom-elements.js" defer></script>
</head>
<body>
    <hello-world></hello-world> <!-- Используем кастомный элемент -->
</body>
</html>

Как это работает внутренне?

Когда браузер парсит HTML и встречает тег <hello-world>, он создает экземпляр соответствующего класса (HelloWorld).
Метод constructor вызывается, и в нем создается теневой DOM (shadow DOM), который инкапсулирует стили и структуру элемента от глобального стиля страницы.
После создания элемента, браузер вызывает методы жизненного цикла, такие как connectedCallback (когда элемент добавляется в DOM) и другие.

Жизненные циклы кастомных элементов

Кастомные элементы могут реализовывать несколько методов жизненного цикла:

connectedCallback(): вызывается, когда элемент добавляется в документ.
disconnectedCallback(): вызывается, когда элемент удаляется из документа.
attributeChangedCallback(attrName, oldValue, newValue): вызывается, когда атрибут элемента изменяется.

Пример с использованием методов жизненного цикла:

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.text = document.createElement('span');
    this.shadow.appendChild(this.text);
  }

  connectedCallback() {
    this.text.textContent = this.getAttribute('name') || 'Привет, мир!';
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this.text.textContent = newValue;
    }
  }

  static get observedAttributes() {
    return ['name'];
  }
}

customElements.define('hello-world', HelloWorld);

Заключение

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

Предыдущий вопрос

Как получить текущее направление для локалей?

Следующий вопрос

Какова цель пользовательского идентификатора?

Содержание:

Как это работает внутренне?

Заключение

Редактировать