Описание тега native-web-component

Описание тега Вопросы с тегом
Собственные веб-компоненты - это многократно используемые клиентские элементы, созданные с использованием собственных HTML-шаблонов, настраиваемых элементов и теневой модели DOM, без необходимости использования сторонних библиотек компонентов.

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

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

Не используйте этот тег для компонентов, созданных сторонними платформами, такими как Polymer или Angular.

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

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

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

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

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

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

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