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

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

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

Пользовательские элементы: API для определения новых элементов HTML
Тень ДОМ: инкапсулированный DOM и стиль с композицией
HTML-шаблоны: Фрагменты HTML, которые не отображаются, но сохраняются до тех пор, пока не будут созданы экземпляры с помощью JavaScript. ^{[ 3 ]}

Функции

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

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

Тень ДОМ

Shadow DOM — это функция, которая позволяет веб-браузеру отображать элементы DOM , не помещая их в дерево DOM основного документа. Это создает барьер между тем, чего могут достичь разработчик и браузер; разработчик не может получить доступ к Shadow DOM так же, как к вложенным элементам, в то время как браузер может отображать и изменять этот код так же, как и к вложенным элементам. Влияние CSS, ограниченного теневой DOM конкретного элемента, заключается в том, что элементы HTML могут быть инкапсулированы без риска утечки стилей CSS и влияния на элементы, на которые они не должны были влиять. Хотя эти элементы инкапсулированы с учетом HTML и CSS, они все равно могут генерировать события, которые могут быть получены другими элементами документа. ^{[ 5 ]}^{[ 6 ]}

Поддерево с областью действия в элементе называется теневым деревом. Элемент, к которому прикреплено теневое дерево, называется теневым хостом. ^{[ 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.

Сообщество

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

История

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

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

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

В 2017 году команда Ionic (инфраструктура мобильных приложений) создала StencilJS , компилятор JavaScript, который генерирует веб-компоненты. ^{[ 16 ]}

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

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

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

См. также

Ссылки

^ GitHub — w3c/webcomComponents: спецификации веб-компонентов. , Консорциум World Wide Web, 03 января 2019 г. , получено 3 января 2019 г.
^ «Веб-компоненты» . Веб-документы MDN . Проверено 3 января 2019 г.
^ «<template>: элемент шаблона контента» . Веб-документы MDN . Мозилла . Проверено 8 июля 2018 г.
^ «Пользовательские элементы» . www.w3.org . Проверено 1 декабря 2016 г.
^ «Что, черт возьми, такое Shadow DOM?» . Дмитрий Глазков . 15 января 2011 г. Проверено 1 декабря 2016 г.
^ Jump up to: ^а ^б «Shadow DOM v1: автономные веб-компоненты | Интернет | Разработчики Google» . Разработчики Google . Проверено 1 декабря 2016 г.
^ «Тень ДОМ» . Сеть разработчиков Mozilla . Проверено 1 декабря 2016 г.
^ Сообщество. «Знакомство с элементами шаблона — WebComponents.org» . веб-компоненты.org . Проверено 3 декабря 2016 г.
^ «webcomComponents.org — Обсуждайте и делитесь веб-компонентами» . www.webcomComponents.org . Проверено 22 июля 2020 г.
^ «Поиск доступных веб-компонентов» .
^ «Проверка интерфейсных платформ с помощью стандарта веб-компонентов» .
^ «Уроки веб-компонентов» .
^ «Веб-компоненты и представления на основе моделей, Алекс Рассел · Fronteers» . Fronteers.nl . Проверено 2 декабря 2016 г.
^ «Состояние веб-компонентов ★ Mozilla Hacks — блог веб-разработчиков» . hacks.mozilla.org . Проверено 2 декабря 2016 г.
^ «RequireJS в коммерции» .
^ «Решения для веб-компонентов: сравнение» .
^ «Как создавать пользовательские элементы и веб-компоненты Angular 6» .
^ «Поддержка инструментов разработчика для веб-компонентов в Firefox 63» .

Внешние ссылки

Официальный сайт
- Веб-компоненты на GitHub
Спецификации веб-компонентов WICG
- веб-компоненты по GitHub WICG спецификациям
Веб-компоненты в веб-документах MDN
Поддержка браузером пользовательских элементов в разделе «Могу ли я использовать?»
Пользовательские элементы повсюду — поддержка платформы для пользовательских элементов
Открытые веб-компоненты
Что такое веб-компоненты?
двеПтицы

[1] GitHub — w3c/webcomComponents: спецификации веб-компонентов. , Консорциум World Wide Web, 03 января 2019 г. , получено 3 января 2019 г.

[2] «Веб-компоненты» . Веб-документы MDN . Проверено 3 января 2019 г.

[3] «<template>: элемент шаблона контента» . Веб-документы MDN . Мозилла . Проверено 8 июля 2018 г.

[4] «Пользовательские элементы» . www.w3.org . Проверено 1 декабря 2016 г.

[5] «Что, черт возьми, такое Shadow DOM?» . Дмитрий Глазков . 15 января 2011 г. Проверено 1 декабря 2016 г.

[:0-6] Jump up to: ^а ^б «Shadow DOM v1: автономные веб-компоненты | Интернет | Разработчики Google» . Разработчики Google . Проверено 1 декабря 2016 г.

[7] «Тень ДОМ» . Сеть разработчиков Mozilla . Проверено 1 декабря 2016 г.

[8] Сообщество. «Знакомство с элементами шаблона — WebComponents.org» . веб-компоненты.org . Проверено 3 декабря 2016 г.

[9] «webcomComponents.org — Обсуждайте и делитесь веб-компонентами» . www.webcomComponents.org . Проверено 22 июля 2020 г.

[10] «Поиск доступных веб-компонентов» .

[11] «Проверка интерфейсных платформ с помощью стандарта веб-компонентов» .

[12] «Уроки веб-компонентов» .

[13] «Веб-компоненты и представления на основе моделей, Алекс Рассел · Fronteers» . Fronteers.nl . Проверено 2 декабря 2016 г.

[hacks_2015-06-14] «Состояние веб-компонентов ★ Mozilla Hacks — блог веб-разработчиков» . hacks.mozilla.org . Проверено 2 декабря 2016 г.

[15] «RequireJS в коммерции» .

[16] «Решения для веб-компонентов: сравнение» .

[17] «Как создавать пользовательские элементы и веб-компоненты Angular 6» .

[18] «Поддержка инструментов разработчика для веб-компонентов в Firefox 63» .

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

[ 6 ]

[ 7 ]

[ 8 ]

[ 9 ]

[ 10 ]

[ 11 ]

[ 12 ]

[ 13 ]

[ 14 ]

[ 15 ]

[ 16 ]

[ 17 ]

[ 18 ]