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

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

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

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

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

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

  • Пользовательские элементы позволяют создавать определенные пользователем элементы с помощью класса 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 могут быть написаны как компоненты.