Веб-компоненты - Web Components

Не путать с Компоненты HTML.

Веб-компоненты представляют собой набор функций, которые обеспечивают стандартную компонентную модель для Интернета[1] что позволяет инкапсуляция и совместимость отдельных HTML-элементы.

Основные технологии, используемые для их создания, включают:[2]

  • Пользовательские элементы: API для определения новых элементов HTML
  • Shadow DOM: инкапсулированный DOM и стиль с композицией
  • HTML-шаблоны: фрагменты HTML, которые не отображаются, но сохраняются до создания экземпляра с помощью JavaScript.[3]

Функции

Пользовательские элементы

Пользовательские элементы состоят из двух частей: автономных настраиваемых элементов и настраиваемых встроенных элементов. Автономные пользовательские элементы HTML элементы, которые полностью отделены от нативных HTML элементы; они, по сути, построены снизу вверх с использованием пользовательских элементов API. Настраиваемые встроенные элементы - это элементы, которые созданы на основе собственных HTML-элементов для повторного использования их функциональных возможностей.[4]

Теневой DOM

Shadow 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>    <шаблон>        <h1><слот имя="заглавие"></слот></h1>        <п><слот имя="описание"></слот></п>    </шаблон></html>

Сценарии не будут выполняться, а ресурсы, находящиеся внутри шаблона, не будут извлечены, пока шаблон не будет удален.[8]

Поддержка браузера

Веб-компоненты поддерживаются всеми основными браузерами[9].

Обратная совместимость со старыми браузерами реализована с помощью JavaScript -основан полифиллы.

Библиотеки

Существует несколько библиотек, построенных на веб-компонентах с целью повышения уровня абстракции при создании пользовательских элементов. Некоторые из этих библиотек X-Tag, Slim.js, Полимер, Бозонный, Riot.js, и Умные HTML-элементы.

Два из них, Bosonic и Polymer, предоставляют готовые компоненты, которые можно использовать бесплатно. Эти компоненты могут использоваться взаимозаменяемо, поскольку все они построены на открытых веб-технологиях.[10][требуется разъяснение ]

Сообщество

Сообщество прилагает множество усилий для создания экосистемы веб-компонентов. WebComponents.org[11] предоставляет интерфейс для поиска любых существующих веб-компонентов, пользовательских элементов повсюду[12] проверяет, совместимы ли популярные интерфейсные фреймворки и готовы ли они к использованию стандарта веб-компонентов, с набором ожидающих ошибок и доступных обходных путей. Кроме того, учебники Vaadin[13] есть специальный раздел, в котором показано, как эти обходные пути эффективно используются с примерами демонстрационных приложений и аналогичными связанными темами.

История

Веб-компоненты были впервые представлены Алексом Расселом на конференции Fronteers Conference 2011.[14]

Полимер, библиотека на основе веб-компонентов была выпущена Google в 2013.[15]

Fire Fox 63 добавляет поддержку инструментов разработчика для веб-компонентов.[16]

Рекомендации

  1. ^ GitHub - w3c / webcomponents: спецификации веб-компонентов., Консорциум World Wide Web, 2019-01-03, получено 2019-01-03
  2. ^ «Веб-компоненты». Веб-документы MDN. Получено 2019-01-03.
  3. ^ «<шаблон>: элемент шаблона содержимого». Веб-документы MDN. Mozilla. Получено 2018-07-08.
  4. ^ «Пользовательские элементы». www.w3.org. Получено 2016-12-01.
  5. ^ "Что, черт возьми, такое Shadow DOM?". Дмитрий Глазков. 2011-01-15. Получено 2016-12-01.
  6. ^ а б «Shadow DOM v1: автономные веб-компоненты | Интернет | разработчики Google». Разработчики Google. Получено 2016-12-01.
  7. ^ «Теневой ДОМ». Сеть разработчиков Mozilla. Получено 2016-12-01.
  8. ^ Сообщество. «Введение в элементы шаблона - WebComponents.org». webcomponents.org. Получено 2016-12-03.
  9. ^ "webcomponents.org - Обсудить и поделиться веб-компонентами". www.webcomponents.org. Получено 2020-07-22.
  10. ^ «Веб-компоненты используются в производстве - мы уже на месте?». vaadin.com. Получено 2016-11-21.
  11. ^ «Поиск доступных веб-компонентов».
  12. ^ «Проверка интерфейсных платформ с помощью стандарта веб-компонентов».
  13. ^ «Учебники по веб-компонентам».
  14. ^ "Веб-компоненты и модели, основанные на представлениях, Алекс Рассел · Fronteers". fronteers.nl. Получено 2016-12-02.
  15. ^ «Состояние веб-компонентов ★ Mozilla Hacks - блог веб-разработчиков». hacks.mozilla.org. Получено 2016-12-02.
  16. ^ «Инструменты разработчика, поддерживающие веб-компоненты в Firefox 63».

внешняя ссылка