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

Некоторым браузерам по-прежнему требуется один или несколько полифильмов для работы с веб-компонентами.

Веб-компонент предназначен для компонента, написанного изначально или с использованием любой библиотеки или фреймворка. native-web-component предназначен только для собственных компонентов.

Веб-компоненты используют одну или несколько из следующих функций браузера:

• Пользовательские элементы позволяют создавать пользовательские элементы с помощью класса ES6, который определяет их поведение и функциональность. Например, если вы хотите создать <my-element> (соглашение об именах всегда равно по крайней мере 1 дефису) для класса с именем MyElement, вы можете вызвать: customElements.define('my-element', MyElement); Пользовательские элементы являются единственной обязательной частью веб-интерфейса. Компонент. [тысяча сто тридцать одна]

• Shadow DOM позволяет разделу документа страницы быть новым, автономным элементом. Стили и сценарии не каскадно включаются или выключаются по умолчанию, а «теневой» DOM (написанный автором компонента) хранится отдельно от «легкого» DOM (созданного разработчиком с использованием компонента). <slot> обеспечивает точку вставки для содержания света. attachShadow() позволяет предоставить <template> для HTML компонента.

• Элемент <template> позволяет использовать фрагмент разметки в качестве шаблона для добавления контента в DOM. Разметка в элементе template анализируется, но не отображается и не «запускается». Например, сценарии в элементе template не выполняются. Начиная с 2018 года, веб-компоненты уходят от импорта HTML в модули ES6, и элемент <template> не так часто используется в компонентах на основе JavaScript.

• Импорт HTML был рекомендуемым механизмом для создания и загрузки веб-компонентов. Некоторые производители браузеров не поддерживают импорт HTML, и они не считаются устаревшими и заменяются модулями ES6.

• Модули ES6 в настоящее время являются рекомендуемым механизмом загрузки веб-компонентов. Ваш компонент теперь создан в файле JavaScript и загружен с помощью оператора import.

Веб-компоненты на стороне клиента, но не все связаны с пользовательским интерфейсом. Например, веб-работник и клиенты IndexedDB могут быть записаны как компоненты.