Веб-компоненты (Web Components) — набор технологий, предоставляющий стандартную компонентную модель для веба, который позволяет создавать инкапсулированные и совместимые друг с другом HTML-элементы. Веб-компоненты — популярный подход при создании микрофронтендов.

Ключевые технологии

Ключевые технологии, используемые для создания веб-компонентов:

Пользовательские элементы (Custom Elements) API для определения новых HTML-элементов Теневой DOM (Shadow DOM) инкапсулированный DOM и стили, с возможностью композиции HTML-шаблоны (HTML Templates) фрагменты HTML, которые не отображаются, а хранятся до тех пор, пока не будут созданы (инстанциированы) с помощью JavaScript

Возможности

Пользовательские элементы Существует два типа пользовательских элементов: автономные пользовательские элементы и пользовательские элементы, расширяющие встроенные. Автономные пользовательские элементы — HTML-элементы, полностью отделённые от нативных HTML-элементов; по сути, они создаются с нуля с использованием API Custom Elements. Пользовательские элементы, расширяющие встроенные, создаются на основе нативных HTML-элементов для повторного использования их функциональности.

Shadow DOM Теневой (shadow) DOM — функциональность, которая позволяет браузеру отображать (рендерить) элементы DOM, не помещая их в основное дерево DOM документа. Это создаёт барьер между тем, к чему могут получить доступ разработчик и браузер; разработчик не может получить доступ к теневому DOM так же, как к вложенным элементам, в то время как браузер может отображать и изменять этот код так же, как и обычные вложенные элементы. Эффект от CSS, изолированного в теневом DOM определённого элемента, заключается в том, что HTML-элементы могут быть инкапсулированы без риска «утечки» стилей CSS и их влияния на элементы, на которые они влиять не должны. Хотя эти элементы инкапсулированы с точки зрения HTML и CSS, они всё же могут генерировать события, которые могут быть перехвачены другими элементами в документе.

Изолированное поддерево в элементе называется теневым деревом (shadow tree). Элемент, к которому присоединено теневое дерево, называется теневым хостом (shadow host).

Теневой DOM всегда должен быть подключён к существующему элементу, либо путем его присоединения как литерального элемента, либо с помощью скриптов. В JavaScript теневой DOM присоединяется к элементу с помощью метода Element.attachShadow().

HTML-шаблоны HTML-шаблон — способ вставлять фрагменты HTML, которые могут быть клонированы из шаблона по мере необходимости. Синтаксис HTML-шаблонов выглядит так:

<html> <template> <h1><slot name="title"></slot></h1> <p><slot name="description"></slot></p> </template> </html>

Скрипты внутри шаблона не выполняются, а ресурсы не загружаются до тех пор, пока шаблон не будет инстанциирован.

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

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

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

Библиотеки Существует множество библиотек, построенных на основе веб-компонентов с целью повышения уровня абстракции при создании пользовательских элементов. Некоторые из этих библиотек: X-Tag, Slim.js, Polymer, Bosonic, Riot.js, Salesforce Lightning Web Components, DataFormsJS, Telepathy и Wompo.

Сообщество Существует множество общественных инициатив в экосистеме веб-компонентов. WebComponents.org предоставляет интерфейс для поиска существующих веб-компонентов. Проект Custom Elements Everywhere проверяет, совместимы ли популярные фронтенд-фреймворки со стандартом веб-компонентов, и предоставляет список нерешённых проблем и доступных обходных путей. Кроме того, в Vaadin Tutorials есть специальный раздел, который на примере демо-приложений показывает, как эффективно использовать эти обходные пути, а также рассматривает смежные темы.

История Впервые веб-компоненты были представлены Алексом Расселом на конференции Fronteers в 2011 году.

В 2013 году Google выпустила Polymer — библиотеку, основанную на веб-компонентах. Polymer является канонической реализацией Material Design для пользовательских интерфейсов веб-приложений.

В 2016 году была представлена библиотека RequireJS и плагин-загрузчик AMD для пользовательских элементов.

В 2017 году команда Ionic создала StencilJS — компилятор JavaScript, который генерирует веб-компоненты.

В 2018 году в Angular 6 были представлены Angular Elements, которые позволяют упаковывать компоненты Angular как пользовательские веб-элементы, являющиеся частью набора API веб-платформы Web Components.

В 2018 году в Firefox 63 была включена по умолчанию поддержка веб-компонентов, а инструменты разработчика были обновлены для их поддержки.

В 2018 году команда Google Chrome в рамках проекта Polymer разработала LitElement. LitElement был спроектирован как легковесный и простой в использовании фреймворк для создания веб-компонентов.

См. также HTML Components Веб-фреймворк Веб-ресурс

Примечания

Ссылки

Категория:Веб-стандарты Категория:Веб-программирование