Лучшие вопросы
Таймлайн
Чат
Перспективы

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

Из Википедии, свободной энциклопедии

Remove ads
Не следует путать с HTML Components.

Веб-компоненты (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].

Remove ads

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

Веб-компоненты поддерживаются актуальными версиями всех основных браузеров[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] есть специальный раздел, который на примере демо-приложений показывает, как эффективно использовать эти обходные пути, а также рассматривает смежные темы.

Remove ads

История

Впервые веб-компоненты были представлены Алексом Расселом на конференции 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 был спроектирован как легковесный и простой в использовании фреймворк для создания веб-компонентов.

Remove ads

См. также

Примечания

Ссылки

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads
Remove ads