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

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

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

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

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

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

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

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

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

Спецификация Статус Комментарии
HTML Living Standard
Определение '<template> element' в этой спецификации.
Живой стандарт Определение <template>.
HTML Living Standard
Определение 'custom elements' в этой спецификации.
Живой стандарт Определение пользовательских HTML элементов
DOM
Определение 'shadow trees' в этой спецификации.
Живой стандарт Определение Shadow DOM
HTML Imports Рабочий черновик Начальное определение HTML импорта
Shadow DOM Устаревшая Начальное определение Shadow DOM

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

В основном:

  • Веб-компоненты по умолчанию поддерживаются в Firefox (версия 63), Chrome и Opera.
  • Safari поддерживает ряд функций веб-компонентов, но меньше, чем указанные выше браузеры.
  • Edge работает над реализацией.

Для получения подробной информации о поддержке определенных функций браузером обратитесь к перечисленным выше справочным страницам.

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

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