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

Понятия и использование

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

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

• Пользовательские элементы: набор API-интерфейсов JavaScript, позволяющих определять пользовательские элементы и их поведение, которые затем можно использовать по желанию в пользовательском интерфейсе.
• Shadow DOM: набор API-интерфейсов JavaScript для прикрепления инкапсулированного «теневого» дерева DOM к элементу, который отображается отдельно от DOM основного документа, и управления соответствующими функциями. Таким образом, вы можете сохранить функции элемента в секрете, поэтому для них можно создавать сценарии и стили, не опасаясь коллизий с другими частями документа.
• HTML templates: элементы <template> и <slot> позволяют создавать шаблоны разметки, которых не видно на отображаемой странице. Затем их можно многократно использовать в качестве основы структуры настраиваемого элемента.

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

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

Учебники

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

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

Использование shadow 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.

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

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

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

Shadow DOM

ShadowRoot

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

DocumentOrShadowRoot

Миксин, определяющий функции, доступные для всех документов и теневых корневых узлов.

Расширения 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: возвращает Boolean, который указывает, будет ли событие распространяться через границу теневой DOM в стандартную DOM (true) или нет (false).
• Event.composedPath: возвращает путь к событию (объекты, для которых будут вызваны обработчики). Это не включает узлы в теневых деревьях, если теневой корневой узел был создан с закрытым ShadowRoot.mode.

HTML templates

<template>

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

<slot>

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

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

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

Slotable

Миксин, реализованный как узлами Element, так и Text, определяющий функции, которые позволяют им стать содержимым элемента <slot>. Миксин определяет один атрибут, Slotable.assignedSlot, который возвращает ссылку на слот, в который вставлен узел.

Element extensions

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

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

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

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

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

Событие slotchange

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

Примеры

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

Спецификации

Совместимость с браузерами

html.elements.template

api.ShadowRoot

Смотрите также

• webcomponents.org - сайт с примерами веб-компонентов, учебными пособиями и другой информацией.
• FAST - это библиотека веб-компонентов, созданная Microsoft, которая предлагает несколько пакетов для использования в зависимости от потребностей вашего проекта. Fast Element - это лёгкое средство для простого создания производительных, эффективных с точки зрения памяти и совместимых со стандартами веб-компонентов. Fast Foundation - это библиотека классов, шаблонов и других утилит веб-компонентов, построенная на основе fast-element, предназначенная для создания зарегистрированных веб-компонентов.
• Hybrids - библиотека веб-компонентов с открытым исходным кодом, которая предпочитает простые объекты и чистые функции class и this синтаксису. Он предоставляет простой и функциональный API для создания пользовательских элементов.
• Polymer - каркас веб-компонентов Google - набор полифилов, улучшений и примеров. На данный момент самый простой способ кроссбраузерно использовать веб-компоненты.
• Snuggsi - Простые веб-компоненты размером ~ 1 КБ, включая полифил - Все, что вам нужно, это браузер и базовое понимание классов HTML, CSS и JavaScript для продуктивной работы.
• Slim.js - библиотека веб-компонентов с открытым исходным кодом - высокопроизводительная библиотека для быстрой и простой разработки компонентов; расширяемая, подключаемая и кросс-платформенная.
• Stencil - набор инструментов для создания многоразовых масштабируемых систем проектирования в веб-компонентах.