Войти
Веб-компоненты представляют собой набор функций, которые обеспечивают стандартную модель компонентов для Интернета, позволяющую инкапсуляцию и совместимость отдельных HTML-элементов.
. Основные технологии, используемые для их создания, включают:
Пользовательские элементы состоят из двух частей: автономных пользовательских элементов и настраиваемых встроенных элементов. Автономные настраиваемые элементы - это элементы HTML, которые полностью отделены от собственных элементов HTML ; По сути, они построены снизу вверх с использованием Custom Elements API. Настраиваемые встроенные элементы - это элементы, которые созданы на основе собственных элементов HTML для повторного использования их функциональных возможностей.
Shadow DOM - это функциональность, которая позволяет веб-браузеру выполнять отображать элементы DOM, не помещая их в DOM-дерево основного документа. Это создает барьер между тем, что может достичь разработчик и браузер; разработчик не может получить доступ к Shadow DOM так же, как с вложенными элементами, в то время как браузер может отображать и изменять этот код так же, как и с вложенными элементами. Влияние CSS, ограниченного областью теневой модели DOM конкретного элемента, заключается в том, что элементы HTML могут быть инкапсулированы без риска утечки стилей CSS и воздействия на элементы, на которые они не должны были влиять. Хотя эти элементы инкапсулированы по отношению к HTML и CSS, они по-прежнему могут запускать события, которые могут быть захвачены другими элементами в документе.
Поддерево с заданной областью действия в элементе называется теневым деревом. Элемент, к которому прикреплено теневое дерево, называется теневым хостом.
Теневой DOM всегда должен быть подключен к существующему элементу, либо путем присоединения его как буквального элемента, либо с помощью скриптинга. В JavaScript вы прикрепляете Shadow DOM к элементу с помощью Element.attachShadow ().
Возможность охвата HTML и CSS необходима для создание пользовательских элементов. Если бы теневой DOM не существовало, различные внешние настраиваемые элементы могли взаимодействовать нежелательным образом.
HTML-шаблон - это способ вставки фрагментов HTML, которые штампуются по желанию. Синтаксис HTML-шаблонов выглядит следующим образом:
Веб-компоненты - Web Components
Сценарии не будут выполняться, а ресурсы, находящиеся внутри шаблона, не будут извлечены, пока шаблон не будет удален.
Интернет Компоненты поддерживаются всеми основными браузерами.
Обратная совместимость со старыми браузерами реализована с использованием JavaScript -based polyfills.
Есть несколько библиотек, которые построены на веб-компонентах с целью повышения уровня абстракции при создании нестандартных элементов. Некоторые из этих библиотек: X-Tag, Slim.js, Polymer, Bosonic, Riot.js и Smart HTML Elements.
Два из них, Bosonic и Polymer, предоставляют готовые компоненты, которые можно использовать бесплатно. Эти компоненты могут использоваться взаимозаменяемо, поскольку все они построены на открытых веб-технологиях.
Сообщество прилагает множество усилий для создания экосистемы веб-компонентов. WebComponents.org предоставляет интерфейс для поиска любых существующих веб-компонентов, Custom Elements Everywhere проверяет совместимость и готовность популярных интерфейсных фреймворков к стандартным веб-компонентам с набором ожидающих ошибок и доступных обходных путей. Более того, в Vaadin Tutorials есть специальный раздел, в котором показано, как эти обходные пути эффективно используются с примерами демонстрационных приложений и аналогичными темами.
Веб-компоненты были впервые представлены Алексом Расселом на Fronteers Conference 2011.
Polymer, библиотека, основанная на веб-компонентах, была выпущена Google в 2013 году.
Firefox 63 добавляет поддержку инструментов разработчика для веб-компонентов.
