Веб-компоненты - это набор функций, которые обеспечивают стандартную компонентную модель для Интернета [1], позволяющую инкапсулировать и взаимодействовать отдельных элементов HTML .
Основные технологии, используемые для их создания, включают: [2]
- Пользовательские элементы: API для определения новых HTML-элементов
- Shadow DOM: инкапсулированный DOM и стиль с композицией
- Шаблоны HTML: фрагменты HTML, которые не обрабатываются, но сохраняются до создания экземпляра с помощью JavaScript [3]
Функции
Пользовательские элементы
Пользовательские элементы состоят из двух частей: автономных настраиваемых элементов и настраиваемых встроенных элементов. Автономные настраиваемые элементы - это элементы HTML , которые полностью отделены от собственных элементов HTML ; По сути, они построены снизу вверх с использованием Custom Elements API . Настраиваемые встроенные элементы - это элементы, которые созданы на основе собственных HTML-элементов для повторного использования их функциональных возможностей. [4]
Теневой DOM
Shadow DOM - это функция, которая позволяет веб-браузеру отображать элементы DOM, не помещая их в дерево DOM основного документа. Это создает барьер между тем, что может достичь разработчик и браузер; разработчик не может получить доступ к Shadow DOM так же, как с вложенными элементами, в то время как браузер может отображать и изменять этот код так же, как и с вложенными элементами. Влияние CSS, ограниченного теневой DOM конкретного элемента, заключается в том, что элементы HTML могут быть инкапсулированы без риска утечки стилей CSS и воздействия на элементы, на которые они не должны были влиять. Хотя эти элементы инкапсулированы по отношению к HTML и CSS, они все же могут запускать события, которые могут быть захвачены другими элементами в документе. [5] [6]
Поддерево с заданной областью действия в элементе называется теневым деревом. Элемент, к которому прикреплено теневое дерево, называется теневым узлом. [6]
Теневой DOM всегда должен быть связан с существующим элементом, либо путем присоединения его как буквального элемента, либо с помощью сценариев . В JavaScript вы прикрепляете Shadow DOM к элементу с помощью Element.attachShadow()
. [7]
Возможность охвата HTML и CSS необходима для создания настраиваемых элементов. Если бы теневой DOM не существовало, различные внешние настраиваемые элементы могли взаимодействовать нежелательным образом.
HTML-шаблон
Шаблон HTML - это способ вставки фрагментов HTML, которые штампуются по желанию. Синтаксис HTML-шаблонов выглядит так:
< html > < template > < h1 > < slot name = "title" > slot > h1 > < p > < slot name = "description" > slot > p > template > html >
Сценарии не будут выполняться, а ресурсы, находящиеся внутри шаблона, не будут извлечены, пока шаблон не будет удален. [8]
Поддержка браузера
Веб-компоненты поддерживаются всеми основными браузерами. [9]
Обратная совместимость со старыми браузерами реализована с помощью полифиллов на основе JavaScript .
Библиотеки
Существует множество библиотек, построенных на веб-компонентах с целью повышения уровня абстракции при создании пользовательских элементов. Некоторые из этих библиотек X-Tag , Slim.js , Polymer , Бозонные , Riot.js , смарт - HTML элементы , Salesforce Lightning Web Components и DataFormsJS .
Из приведенного выше списка Bosonic, Polymer и DataFormsJS предоставляют готовые компоненты, которые можно использовать бесплатно. Эти компоненты могут использоваться взаимозаменяемо, поскольку все они построены на открытых веб-технологиях. [10] [ требуется пояснение ]
Сообщество
Сообщество прилагает множество усилий для создания экосистемы веб-компонентов. WebComponents.org [11] предоставляет интерфейс для поиска любых существующих веб-компонентов, Custom Elements Everywhere [12] проверяет совместимость и готовность популярных интерфейсных фреймворков к стандарту веб-компонентов, с набором ожидающих ошибок и доступных обходных путей. Более того, в Vaadin Tutorials [13] есть специальный раздел, в котором показано, как эти обходные пути эффективно используются с примерами демонстрационных приложений и аналогичными темами.
История
Веб-компоненты были впервые представлены Алексом Расселом на конференции Fronteers Conference 2011. [14]
Polymer , библиотека, основанная на веб-компонентах, была выпущена Google в 2013 году [15].
Firefox 63 включил поддержку веб-компонентов по умолчанию и обновил инструменты разработчика для их поддержки в 2018 году. [16]
Рекомендации
- ^ GitHub - w3c / webcomponents: спецификации веб-компонентов. , Консорциум World Wide Web, 03.01.2019 , получено 03.01.2019
- ^ «Веб-компоненты» . Веб-документы MDN . Проверено 3 января 2019 .
- ^ «<шаблон>: элемент шаблона содержимого» . Веб-документы MDN . Mozilla . Проверено 8 июля 2018 .
- ^ «Пользовательские элементы» . www.w3.org . Проверено 1 декабря 2016 .
- ^ "Что, черт возьми, такое Shadow DOM?" . Дмитрий Глазков . 2011-01-15 . Проверено 1 декабря 2016 .
- ^ а б «Shadow DOM v1: автономные веб-компоненты | Интернет | разработчики Google» . Разработчики Google . Проверено 1 декабря 2016 .
- ^ «Теневой ДОМ» . Сеть разработчиков Mozilla . Проверено 1 декабря 2016 .
- ^ Сообщество. «Знакомство с элементами шаблона - WebComponents.org» . webcomponents.org . Проверено 3 декабря 2016 .
- ^ «webcomponents.org - Обсудить и поделиться веб-компонентами» . www.webcomponents.org . Проверено 22 июля 2020 .
- ^ «Веб-компоненты используются в производстве - мы уже на месте?» . vaadin.com . Проверено 21 ноября 2016 .
- ^ «Поиск доступных веб-компонентов» .
- ^ «Проверка интерфейсных платформ с помощью стандартных веб-компонентов» .
- ^ «Учебники по веб-компонентам» .
- ^ "Веб-компоненты и модели, основанные на представлениях, Алекс Рассел · Fronteers" . fronteers.nl . Проверено 2 декабря 2016 .
- ^ «Состояние веб-компонентов ★ Mozilla Hacks - блог веб-разработчиков» . hacks.mozilla.org . Проверено 2 декабря 2016 .
- ^ «Инструменты разработчика, поддерживающие веб-компоненты в Firefox 63» .
Внешние ссылки
- Webcomponents.org
- Открытые веб-компоненты
- Могу ли я использовать? - Браузерная поддержка пользовательских элементов
- Пользовательские элементы повсюду - поддержка пользовательских элементов фреймворком
- Спецификации веб-компонентов
- Что такое веб-компоненты?
- две птицы
- библиотека slim.js
- Полимер-Проект
- SmartJS
- Веб-компоненты Salesforce Lightning
- DataFormsJS