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

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.

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

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

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

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

* `::part` (en-US): Представляет любой элемент в теневом дереве (en-US), имеющий соответствующий атрибут `part`.

### 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 with JavaScript enabled. Enable JavaScript to view data.

### api.ShadowRoot

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

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