Веб-компоненты

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

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

Веб-компоненты призваны решить такие проблемы — они состоят из трёх основных технологий, которые могут быть объединены для создания универсальных пользовательских элементов с изолированной функциональностью, которые могут быть повторно использованы где угодно без риска столкновений кода.

Пользовательские элементы

Набор JavaScript-API, позволяющий определять пользовательские элементы и их поведение, которые затем можно использовать по своему усмотрению в вашем пользовательском интерфейсе.

Тень DOM

Набор JavaScript-API для прикрепления изолированного "теневого" дерева DOM к элементу — которое рендерится отдельно от основного DOM документа — и управления связанной функциональностью. Таким образом, вы можете сохранить функции элемента конфиденциальными, чтобы их можно было программировать и стилизовать без опасения столкновений с другими частями документа.

HTML-шаблоны

Элементы <template> и <slot> позволяют вам создавать шаблоны разметки, которые не отображаются на рендеренной странице. Затем их можно многократно использовать в качестве основы структуры пользовательского элемента.

Базовый подход к реализации веб-компонента обычно выглядит примерно так:

1. Создайте класс, в котором вы определите функциональность вашего веб-компонента, используя синтаксис класса.
2. Зарегистрируйте ваш новый пользовательский элемент с помощью метода CustomElementRegistry.define(), передав ему имя элемента, который необходимо определить, класс или функцию, в которой определяется его функциональность, и, необязательно, от которого элемента он наследует.
3. При необходимости прикрепите теневой DOM к пользовательскому элементу с помощью метода Element.attachShadow(). Добавьте дочерние элементы, обработчики событий и т. д. в теневой DOM, используя обычные DOM-методы.
4. При необходимости определите HTML-шаблон с помощью <template> и <slot>. Снова используйте стандартные DOM-методы для клонирования шаблона и прикрепления его к вашему теневому DOM.
5. Используйте ваш пользовательский элемент где угодно на вашей странице, как любой другой обычный HTML-элемент.

Использование пользовательских элементов

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

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

Руководство, которое рассматривает основы теневого DOM, показывая, как прикрепить теневой DOM к элементу, добавлять элементы в теневое дерево DOM, стилизовать его и многое другое.

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

Руководство, показывающее, как определить переиспользуемую HTML-структуру с помощью элементов <template> и <slot>, и как затем использовать эту структуру внутри ваших веб-компонентов.

CustomElementRegistry

Содержит функциональность, связанную с пользовательскими элементами, в частности метод CustomElementRegistry.define(), используемый для регистрации новых пользовательских элементов, чтобы их можно было затем использовать в вашем документе.

Window.customElements

Возвращает ссылку на объект CustomElementRegistry.

Обратные вызовы жизненного цикла

Специальные функции обратного вызова, определённые внутри определения класса пользовательского элемента, влияющие на его поведение:

connectedCallback()

Вызывается, когда пользовательский элемент впервые подключён к DOM документа.

disconnectedCallback()

Вызывается, когда пользовательский элемент отключён от DOM документа.

adoptedCallback()

Вызывается, когда пользовательский элемент перемещён в новый документ.

attributeChangedCallback()

Вызывается, когда один из атрибутов пользовательского элемента добавлен, удалён или изменён.

Расширения для создания пользовательских встроенных элементов

Определены следующие расширения:

Глобальный HTML-атрибут is

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

Параметр "is" метода Document.createElement()

Позволяет создать экземпляр стандартного HTML-элемента, который ведет себя как указанный зарегистрированный пользовательский встроенный элемент.

CSS псевдоклассы

Псевдоклассы, относящиеся конкретно к пользовательским элементам:

:defined

Совпадает с любым элементом, который определен, включая встроенные элементы и пользовательские элементы, определенные с помощью CustomElementRegistry.define().

:host

Выбирает теневого хоста теневого DOM, содержащего CSS, внутри которого он используется.

:host()

Выбирает теневого хоста теневого DOM, содержащего CSS, внутри которого он используется (позволяет выбирать пользовательский элемент внутри его теневого DOM) — но только если селектор, переданный в качестве параметра функции, соответствует теневому хосту.

:host-context()

Выбирает теневого хоста теневого DOM, содержащего CSS, внутри которого он используется (позволяет выбирать пользовательский элемент внутри его теневого DOM) — но только если селектор, переданный в качестве параметра функции, соответствует предку(ам) теневого хоста в месте его расположения в иерархии DOM.

:state()

Совпадает с пользовательскими элементами, которые находятся в указанном пользовательском состоянии. Более точно, он соответствует анонимным пользовательским элементам, где указанное состояние присутствует в CustomStateSet элемента.

CSS псевдоэлементы

Псевдоэлементы, относящиеся конкретно к пользовательским элементам:

::part

Представляет любой элемент внутри теневого дерева, имеющий соответствующий атрибут part.

ShadowRoot

Представляет корневой узел поддерева теневого DOM.

Element расширения

Расширения интерфейса Element, связанные с теневым DOM:

• Метод Element.attachShadow() прикрепляет дерево теневого DOM к указанному элементу.
• Свойство Element.shadowRoot возвращает корень тени, прикреплённый к указанному элементу, или null, если тень не прикреплена.

Соответствующие дополнения к Node

Дополнения к интерфейсу Node, относящиеся к теневому DOM:

• Метод Node.getRootNode() возвращает корневой объект контекста, который необязательно включает корень тени, если он доступен.
• Свойство Node.isConnected возвращает булевое значение, указывающее, подключён ли узел (прямо или косвенно) к объекту контекста, например, к объекту Document в случае обычного DOM или к ShadowRoot в случае теневого DOM.

Event расширения

Расширения интерфейса Event, относящиеся к теневому DOM:

Event.composed

Возвращает true, если событие будет распространяться через границу теневого DOM в стандартный DOM, в противном случае false.

Event.composedPath

Возвращает путь события (объекты, для которых будут вызваны обработчики). Это не включает узлы в теневых деревьях, если корень тени был создан с ShadowRoot.mode закрытым.

<template>

Содержит фрагмент HTML, который не отображается при первоначальной загрузке содержащего документа, но может быть отображен во время выполнения с помощью JavaScript, в основном используется в качестве основы для структур пользовательских элементов. Соответствующий интерфейс DOM — HTMLTemplateElement.

<slot>

Заполнитель внутри веб-компонента, который вы можете заполнить собственным разметкой, что позволяет создавать отдельные деревья DOM и представлять их вместе. Соответствующий интерфейс DOM — HTMLSlotElement.

Глобальный атрибут HTML slot

Назначает слот в тенистом дереве DOM теневому элементу.

Element.assignedSlot

Только для чтения атрибут, который возвращает ссылку на <slot>, в который вставлен этот элемент.

Text.assignedSlot

Только для чтения атрибут, который возвращает ссылку на <slot>, в который вставлен этот узел текста.

Element расширения

Расширения интерфейса Element, относящиеся к слотам:

Element.slot

Возвращает имя теневого слота DOM, присоединённого к элементу.

Псевдоэлементы CSS

Псевдоэлементы, относящиеся конкретно к слотам:

::slotted

Сопоставляет любой контент, который вставляется в слот.

Событие slotchange

Вызывается на экземпляре HTMLSlotElement (<slot> элемент), когда узел(ы), содержащиеся в этом слоте, изменяются.

Мы создаем ряд примеров в нашем репозитории GitHub web-components-examples. По мере времени будут добавлены новые.