Меню

Главная
Случайная статья
Настройки
Веб-компоненты
Материал из https://ru.wikipedia.org

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

Содержание

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

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


Возможности

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

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

Shadow DOM

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

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

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

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, Bosonic, Riot.js, Salesforce Lightning Web Components, DataFormsJS, Telepathy и Wompo.

Сообщество

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

История

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

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

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

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

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

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

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

См. также

Примечания
  1. GitHub - w3c/webcomponents: Web Components specifications. (англ.), World Wide Web Consortium, 3 января 2019, Дата обращения: 3 января 2019
  2. Web Components (англ.). MDN Web Docs. Дата обращения: 3 января 2019.
  3. <template>: The Content Template element (англ.). MDN Web Docs. Mozilla. Дата обращения: 8 июля 2018.
  4. Custom Elements (англ.). www.w3.org. Дата обращения: 1 декабря 2016.
  5. What the Heck is Shadow DOM? (англ.). Dimitri Glazkov (15 января 2011). Дата обращения: 1 декабря 2016.
  6. 1 2 Shadow DOM v1: Self-Contained Web Components | Web | Google Developers (англ.). Google Developers. Дата обращения: 1 декабря 2016.
  7. Shadow DOM (англ.). Mozilla Developer Network. Дата обращения: 1 декабря 2016.
  8. Community. Introduction to the template elements — WebComponents.org (англ.). webcomponents.org. Дата обращения: 3 декабря 2016.
  9. webcomponents.org - Discuss & share web components (англ.). www.webcomponents.org. Дата обращения: 22 июля 2020.
  10. Search available Web Components (англ.).
  11. Validate Front-end Frameworks with Web Components Standard (англ.).
  12. Web Components Tutorials (англ.).
  13. Web Components and Model Driven Views by Alex Russell · Fronteers (англ.). fronteers.nl. Дата обращения: 2 декабря 2016. Архивировано из оригинала 17 апреля 2022 года.
  14. The state of Web Components Mozilla Hacks – the Web developer blog (англ.). hacks.mozilla.org. Дата обращения: 2 декабря 2016.
  15. RequireJS in Commerce (англ.).
  16. Web Component Solutions: A Comparison (англ.).
  17. How to create Angular 6 Custom Elements and Web Components (англ.).
  18. Developer Tools support for Web Components in Firefox 63 (англ.).


Ссылки
  • webcomponents.org (англ.) — официальный сайт Веб-компоненты
Downgrade Counter