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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вариант «есть» Document.createElement()метода Позволяет создать экземпляр стандартного HTML-элемента, который ведет себя как заданный зарегистрированный настраиваемый встроенный элемент.

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

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

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

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

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

Псевдоэлементы 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закрытым.

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

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

Глобальный slotатрибут HTML Назначает элементу слот в теневом дереве теневого DOM.

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

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

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

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

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

::slotted Соответствует любому содержимому, которое вставляется в слот.

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

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