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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

Как разработчики, все мы знаем, что как можно больше повторного использования кода - хорошая идея. Традиционно это было не так просто для пользовательских структур разметки - подумайте о сложном 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 (en-US)

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

Использование шаблонов и слотов (en-US)

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

Справка

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

CustomElementRegistry (en-US)

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

Window.customElements (en-US)

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

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

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

  • connectedCallback: вызывается, когда настраиваемый элемент впервые подключается к DOM документа.
  • disconnectedCallback: вызывается, когда пользовательский элемент отключается от DOM документа.
  • adoptedCallback: вызывается, когда настраиваемый элемент перемещается в новый документ.
  • attributeChangedCallback: вызывается при добавлении, удалении или изменении одного из атрибутов настраиваемого элемента.
Расширения для создания пользовательских встроенных элементов

  • Глобальный атрибут HTML is: позволяет указать, что стандартный элемент HTML должен вести себя как зарегистрированный встроенный пользовательский элемент.
  • Параметр «is» метода Document.createElement(): позволяет создать экземпляр стандартного HTML-элемента, который ведёт себя как заданный зарегистрированный настраиваемый встроенный элемент.
Псевдоклассы CSS

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

  • :defined: Соответствует любому заданному элементу, включая встроенные элементы и настраиваемые элементы, определённые с помощью CustomElementRegistry.define().
  • :host (en-US): Выбирает теневой хост теневого DOM (en-US), содержащего CSS, внутри которого он используется.
  • :host(): Выбирает теневой хост теневой DOM (en-US), содержащий CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент изнутри его теневой DOM) - но только если селектор, указанный в качестве параметра функции, совпадает с теневым хостом.
  • :host-context(): Выбирает теневой хост теневой DOM (en-US), содержащий CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент изнутри его теневой DOM) - но только если селектор, указанный в качестве параметра функции, совпадает с предком(-ами) теневого хоста в том месте, где он находится внутри иерархии DOM.
Псевдоэлементы CSS

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

Shadow DOM

ShadowRoot (en-US)

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

DocumentOrShadowRoot

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

Расширения Element

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

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

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

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

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

  • Event.composed (en-US): возвращает Boolean, который указывает, будет ли событие распространяться через границу теневой DOM в стандартную DOM (true) или нет (false).
  • Event.composedPath (en-US): возвращает путь к событию (объекты, для которых будут вызваны обработчики). Это не включает узлы в теневых деревьях, если теневой корневой узел был создан с закрытым ShadowRoot.mode (en-US).

HTML templates

<template>

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

<slot>

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

Глобальный HTML атрибут slot (en-US)

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

Slotable (en-US)

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

Element extensions

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

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

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

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

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

Примеры

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

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

Specification
HTML Standard
# the-template-element
DOM Standard
# interface-shadowroot

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

html.elements.template

BCD tables only load in the browser

api.ShadowRoot

BCD tables only load in the browser

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

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