Веб компоненти

Web Components (вебкомпоненти) - це набір функцій що додаються консорціумом W3C до специфікацій HTML та DOM які дозволять створення повторно використовних віджетів^[en] чи компонентів у застосунках та документах веб. Метою є принести  компонентно-орієнтоване програмування у World Wide Web.

Модель компонентів дозволяє інкапсуляцію та інтероперабельність окремих елементів HTML.

Web компоненти складаються з 4 основних деталей, які можуть використовуватись окремо або поодинці:

• Custom Elements (спеціальні елементи) - API для визначення нових HTML елементів
• Shadow DOM - інкапсульований DOM та стилі, з композицією
• HTML Imports - декларативні методи імпортування HTML документів в інші документи
• HTML Templates - шаблон^[1], який дозволяє документам містити інертні (англ. inert, не включені в сторінку) частини DOM

Деталі

Спеціальні елементи

Є два види спеціальних елементів: автономні спеціальні елементи, і змінені вбудовані елементи. Автономні спеціальні елементи - це HTML елементи які повністю відділені від стандарних елементів HTML, і по суті створються від фундаменту з допомогою API спеціальних елементів. Змінені вбудовані елементи - це елементи які будуються на основі стандартних елементів HTML і перевикористовують їх функціональність.^[2]

Shadow DOM

Shadow DOM - це функціональність що дозволяє браузеру відображати DOM елементи не додаючи їх в головне DOM дерево документа. Результатом цього є те що CSS діє лише в межах Shadow DOM певного елемента, і такі компоненти можуть вставлятись без ризику того що CSS стилі витечуть і зачіплять елементи які не мали б зачіпати.  Хоча ці елементи інкапсулюються щодо HTML та CSS, але вони все ж можуть генерувати події, які відловлюються іншими елементами документа.^[3][4]

Піддерево елемента яке містить Shadow DOM називається shadow tree. Елемент до якого прив'язане shadow tree називається shadow host.

Shadow DOM завжди повинен кріпитись до існуючого компонента, через прив'язку його як літерала або скриптами. В JavaScript, Shadow DOM прикріплюється до елемента за допомогою метода Element.attachShadow().^[5]

Здатність обмежувати область видимості HTML та CSS ключова для створення Custom Elements. Якщо б shadow DOM не існував, різні спеціальні елементи могли б взаємодіяти непередбачуваними і небажаними способами.

HTML Import

HTML import це інструмент для включення HTML документів та вебкомпонентів із зовнішніх джерел без використання запитів AJAX чи подібних методів.^[6]

 Синтаксис імпорту в HTML виглядає так:

<link rel="import" href="mydocument.html">

Щоб униктуни завантаження та виконання скриптів які впроваджуватимуться з імпортом двічі, HTML import пропускає завантаження файлів які вже були завантажені до того.^[7]

Mozilla Firefox не має підтримки HTML import, і не має наміру її реалізовувати.^[8][9]

HTML Template

HTML template це спосіб створювати шматки HTML які будуть вставлятись в документ при бажанні. Синтаксис HTML template виглядає так:

<template>
    <p>The HTML you wish to instantiate on will</p>
</template>

Скрипти всередині не спрацюють, а ресурси не завантажаться, поки шаблон не буде використаний в документі.^[10]

Підтримка браузерами

HTML Templates підтримуються в Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, та Opera.^[11]

Підтримка ранніх версій спеціальних елементів та Shadow DOM, відомих як "v0", присутня в деяких браузерів на основі Blink, таких як Google Chrome, Opera та Mozilla Firefox (в останньому потребує ручної зміни налаштувань). Новіше API спеціальних елементів та Shadow DOM ("v1") реалізоване в Safari 10,^[12] Google Chrome (53.0.2785), та розробляється в  Mozilla Firefox. Microsoft Edge ще не почав реалізацію спеціальних елементів чи  Shadow DOM.^[13]

Бібліотеки

Є кілька бібліотек що побудовані навколо вебкомпонентів з метою збільшення рівня абстракції при створенні спеціальних елементів. Чотирма найвідомішими є X-Tag, Slim.js, Polymer, та Bosonic.

Двоє з них, Bosonic та Polymer, надають готові компоненти які можна вільно використовувати. Ці компоненти взаємозамінні, бо побудовані на основі відкритих веб технологій.^{[14][прояснити]}

Історія

Web компоненти були вперше презентовані Алексом Расселом на Fronteers Conference 2011. ^[15]

Polymer, бібліотека на основі Web компонентів була випущена Google в 2013.^[16]