В предыдущей статье мы обсуждали, что такое веб-компоненты и чем они могут быть полезны для вашего проекта. В этом я упомянул, что они сделаны из четырех основных компонентов.
В этой статье мы рассмотрим эти четыре строительных блока, из которых состоят веб-компоненты, более подробно.
Эта статья основана на моем выступлении на JavaScript Meetup в Коломбо. Вы можете найти слайды для этой презентации здесь, а исходный код в репозитории github здесь.
Стандарты веб-компонентов
Существует четыре основных стандарта, составляющих веб-компоненты. Это:
- Пользовательские элементы
- Тень ДОМ
- Шаблоны
- Импорт HTML (в настоящее время заменен модулями ES)
В сочетании с другими веб-технологиями эти новые стандарты позволяют нам создавать полезные веб-компоненты.
Мы рассмотрим каждый стандарт и то, как они позволяют создавать веб-компоненты.
1. Пользовательские элементы
Пользовательские элементы — это набор API-интерфейсов, которые дают нам возможность создавать и регистрировать пользовательский компонент.
Чтобы создать пользовательский компонент, сначала необходимо создать класс, расширяющий HTMLElement. Этот класс будет обрабатывать такие вещи, как привязка атрибутов, методы жизненного цикла, привязка шаблонов и многое другое.
Затем вы можете зарегистрировать новый компонент в документе как допустимый пользовательский компонент. Имя должно содержать дефис.
После определения компонента вы можете просто использовать <cmbjs-toggle> в своем шаблоне, как и другие теги.
2. Шаблон (и слот)
После определения компонента нам нужен способ привязать к нему некоторый HTML. Если бы мы использовали для этого обычный HTML, браузеру пришлось бы обрабатывать эти элементы еще до отображения компонента. Кроме того, у нас не будет возможности вставлять пользовательские элементы в наш пользовательский компонент.
Шаблон позволяет нам создавать инертные элементы DOM, которые мы затем можем использовать в веб-компоненте.
У нас также есть доступ к новому элементу <slot>, который может быть полезен для размещения предметов. Если у нас есть элемент слота в шаблоне, все, что у нас есть между нашим тегом пользовательского элемента, будет помещено туда. У нас также может быть несколько именованных слотов.
3. Теневой ДОМ
Нам нужно, чтобы вся сложная логика и стили оставались внутри компонентов, которые мы создаем. Вот тут-то и появляется теневой DOM. Утечка стилей может нарушить стиль всей страницы.
Спецификация теневого DOM позволяет нам инкапсулировать логику и стили в компоненте.
В классе элемента мы можем добавить теневой корень и прикрепить к нему шаблон. Это создает новый теневой DOM в дереве DOM, который будет отделен от всего приложения.
4. Импорт HTML*
Создав наш новый блестящий компонент, нам нужен способ его импорта и использования. Вот где в дело вступает импорт HTML.
Импорт HTML предоставил нам возможность легко импортировать компонент на страницу.
Плохая новость (причина звездочки после названия) в том, что эта функция скоро будет удалена из Chrome, а другие браузеры ее не поддерживают. Поэтому нам нужно будет использовать импорт ES6 для импорта веб-компонентов на данный момент.
Синтаксис для импорта и использования веб-компонентов с помощью импорта HTML раньше выглядел следующим образом.
Но не все так плохо, компоненты HTML могут быть пересмотрены когда-нибудь в будущем. До тех пор у нас есть импорт модулей, который после настройки работает очень хорошо.
Резюме
Мы рассмотрели стандарты, которые были введены, чтобы дать браузерам возможность размещать веб-компоненты, и то, как они работают вместе.
Вы можете прочитать гораздо больше технических деталей в документации MDN здесь, которая содержит гораздо больше технических деталей: https://developer.mozilla.org/en-US/docs/Web/Web_Components
