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

Invalid slug for templ/sidebar: Веб-компоненты

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

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

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

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

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 с примерами веб-компонентов. Со временем будет добавлено больше.

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

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

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

html.elements.template

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
template
shadowrootclonable
shadowrootdelegatesfocus
shadowrootmode
shadowrootserializable
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Uses a non-standard name.
Has more compatibility info.

api.ShadowRoot

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ShadowRoot
activeElement
adoptedStyleSheets
clonable
delegatesFocus
elementFromPoint
Non-standard
elementsFromPoint
Non-standard
fullscreenElement
getAnimations
getHTML
getSelection
Non-standard
host
innerHTML
Can be set with a TrustedHTML instance
mode
pictureInPictureElement
pointerLockElement
serializable
setHTMLUnsafe
slotAssignment
styleSheets

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Has more compatibility info.

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

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