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

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

Черновик
Эта страница не завершена.

Веб-компоненты состоят из нескольких отдельных технологий. Вы можете думать о Веб-компонентах как о переиспользуемых виджетах пользовательского интерфейса, которые создаются с помощью открытых веб-технологий. Они являются частью браузера и поэтому не нуждаются во внешних библиотеках, таких как jQuery или Dojo. Существующий Веб-компонент может быть использован без написания кода, просто путем импорта выражения на HTML-страницу. Веб-компоненты используют новые или разрабатываемые стандартные возможности браузера.

Заметка: Это экспериментальная технология. Браузер, который вы используете, должен поддерживать веб-компоненты. Смотрите Включение веб компонентов в Firefox.

Определение выше справедливо на данный момент, но не включает многие другие случаи, для которых могут быть созданы Веб-компоненты. С Веб-компонентами вы можете практически все, что можно сделать с помощью HTML, CSS и JavaScript, и они  могут быть переносимыми, так что вы можете легко переиспользовать их.

Иногда возникает некоторое замешательство относительно Веб-компонентов и Google Polymer. Polymer это фреймфорк, основанный на технологии Веб-компонент. Вы можете создавать и использовать Веб-компоненты без Polymer.

Веб-компоненты реализованы не полностью в некоторых браузерах, поэтому, использование их сейчас в большинстве браузеров (январь 2015), вероятно, потребует использования полифила, чтобы заполнить недостояющий функционал. Полифилы доступны в Google Polymer project. Чтобы понять, какой браузер реализует Веб-компоненты, смотри Are We Componentized Yet?

Веб-компоненты состоят из четырех технологий (несмотря на то, что каждая может быть использована отдельно):

Встроенные элементы 
Набор JavaScript API, которые позволяют вам определять пользовательские элементы и их поведение, которые затем могут использоваться в вашем пользовательском интерфейсе.
HTML-шаблоны
Элементы <template> и <slot> позволяют вам создать шаблон разметки, который не отображается на странице. Он может использоваться множество раз в качестве структурной основы пользовательсокого элемента.
Теневой DOM
Набор  JavaScript API, которые позволяют прикреплять инкапсулированное "теневое" DOM-дерево к элементу, отображающееся отдельно от основного DOM-документа, и контролировать связанную с ним функциональность.
HTML-импорты
После того, как вы создали пользовательский компонент, самый простой способ его повторного использования состоит в том, чтобы хранить его реализацию в отдельном файле, а затем использовать механизм импорта, чтобы импортировать его на те страницы, где вы хотите его использовать. HTML-ипорты являются таким механизмом, хотя и есть споры связанные с ним, например, Mozilla принципиально не согласна с этим подходом и намерена внедрить что-то более подходящее в ближайшем будущем

Спецификация Веб-компонентов определяет следующие пункты:

Разрешение Веб-компонент в Firefox

Возможности Веб-компонентов по умолчанию отключены в Firefox. Чтобы разрешить их, перейдите на страницу about:config и отключите любые предупреждения, которые появятся. Затем найдите свойство, называемое dom.webcomponents.enabled и установите его в true.

Firefox enable web components

Спецификации

Спецификация Статут Комментарии
Unknown Неизвестно  
HTML Living Standard
Определение 'template element' в этой спецификации.
Живой стандарт Без изменений
HTML5
Определение 'template element' в этой спецификации.
Рекомендация Начальное определение
Shadow DOM Устаревшая  
HTML Imports Рабочий черновик  
CSS Scoping Module Level 1 Рабочий черновик