Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

Заметка: Это экспериментальная технология. Браузер, который вы используете, должен поддерживать веб-компоненты. Смотрите Enabling Web Components in 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' в этой спецификации.
Живой стандарт No change
HTML5
Определение 'template element' в этой спецификации.
Рекомендация Initial definition
Shadow DOM Устаревшая  
HTML Imports Рабочий черновик  
CSS Scoping Module Level 1 Рабочий черновик  

Метки документа и участники

Внесли вклад в эту страницу: newbornfrontender, Peccansy, alinofka, curdwithraisins, dmitrykurmanov, Kalita-Roman
Обновлялась последний раз: newbornfrontender,