Веб-компоненты — это набор функций, которые предоставляют стандартную компонентную модель для веба [1], позволяющую инкапсуляцию и взаимодействие отдельных элементов HTML . Веб-компоненты — популярный подход при создании микрофронтендов .
Основные технологии, используемые для создания веб-компонентов, включают: [2]
Пользовательские элементы состоят из двух частей: автономные пользовательские элементы и настраиваемые встроенные элементы. Автономные пользовательские элементы — это элементы HTML , которые полностью отделены от собственных элементов HTML ; по сути, они построены снизу вверх с использованием API пользовательских элементов . Настраиваемые встроенные элементы — это элементы, которые построены на собственных элементах HTML для повторного использования их функциональности. [4]
Shadow DOM — это функциональная возможность, которая позволяет веб-браузеру отображать элементы DOM , не помещая их в основное дерево DOM документа. Это создает барьер между тем, чего могут достичь разработчик и браузер; разработчик не может получить доступ к Shadow DOM так же, как он это делал бы с вложенными элементами, в то время как браузер может отображать и изменять этот код так же, как он это делал бы с вложенными элементами. Влияние CSS, ограниченного Shadow DOM определенного элемента, заключается в том, что элементы HTML могут быть инкапсулированы без риска утечки стилей CSS и влияния на элементы, на которые они не должны влиять. Хотя эти элементы инкапсулированы относительно HTML и CSS, они все равно могут вызывать события, которые могут быть подхвачены другими элементами в документе. [5] [6]
Поддерево области видимости в элементе называется теневым деревом. Элемент, к которому присоединено теневое дерево, называется теневым хостом. [6]
Shadow DOM всегда должен быть подключен к существующему элементу, либо путем присоединения его как буквального элемента, либо через скриптинг . В JavaScript Shadow DOM прикрепляются к элементу с помощью Element.attachShadow(). [7]
HTML-шаблон — это способ вставки фрагментов HTML, которые клонируются из шаблона по желанию. Синтаксис HTML-шаблонов выглядит следующим образом:
< html > < template > < h1 >< имя слота = "title" ></ slot ></ h1 > < p >< имя слота = "description" ></ slot ></ p > </ template > </ html > Скрипты не будут запускаться, а ресурсы, находящиеся внутри шаблона, не будут извлечены, пока шаблон не будет создан. [8]
Веб-компоненты поддерживаются текущими версиями всех основных браузеров. [9]
Обратная совместимость со старыми браузерами реализована с помощью полифиллов на основе JavaScript .
Существует множество библиотек, построенных на веб-компонентах с целью повышения уровня абстракции при создании пользовательских элементов. Некоторые из этих библиотек: X-Tag, Slim.js, Polymer , Bosonic, Riot.js, Salesforce Lightning Web Components, DataFormsJS, Telepathy и Wompo
Существует множество усилий сообщества для экосистемы веб-компонентов. WebComponents.org [10] предоставляет интерфейс для поиска любых существующих веб-компонентов, Custom Elements Everywhere [11] проверяет, совместимы ли популярные интерфейсные фреймворки и готовы ли они к использованию стандарта веб-компонентов, с набором отложенных ошибок и доступных обходных путей. Более того, Vaadin Tutorials [12] имеет специальный раздел, который показывает, как эти обходные пути используются эффективно с примерами демонстрационных приложений и аналогичными связанными темами, также известными как Infinite Craft
В 2011 году веб-компоненты были впервые представлены Алексом Расселом на конференции Fronteers. [13]
В 2013 году компания Google выпустила Polymer — библиотеку на основе веб-компонентов. [14] Polymer — каноническая реализация Material Design для пользовательских интерфейсов веб-приложений.
В 2016 году RequireJS был представлен как библиотека JavaScript и плагин загрузчика AMD для пользовательских элементов. [15]
В 2017 году команда Ionic (фреймворк мобильных приложений) создала StencilJS, компилятор JavaScript, который генерирует веб-компоненты. [16]
В 2018 году в Angular 6 были представлены элементы Angular, которые позволяют упаковывать компоненты Angular в виде пользовательских веб-элементов, которые являются частью набора веб-компонентов API веб-платформы. [17]
В 2018 году Firefox 63 включил поддержку веб-компонентов по умолчанию и обновил инструменты разработчика для их поддержки. [18]
В 2018 году LitElement был разработан командой Google Chrome как часть более крупного проекта Polymer . LitElement был разработан как легкий и простой в использовании фреймворк для создания веб-компонентов.