Веб компоненти
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]
Зноски[ред. | ред. код]
- ↑ Архівована копія. Архів оригіналу за 16 травня 2022. Процитовано 2 червня 2017.
{{cite web}}: Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title (посилання) - ↑ Custom Elements. www.w3.org. Архів оригіналу за 9 червня 2017. Процитовано 1 грудня 2016.
- ↑ What the Heck is Shadow DOM?. Dimitri Glazkov. 15 січня 2011. Архів оригіналу за 17 червня 2017. Процитовано 1 грудня 2016.
- ↑ Shadow DOM v1: Self-Contained Web Components | Web | Google Developers. Google Developers (англ.). Архів оригіналу за 24 червня 2017. Процитовано 1 грудня 2016.
- ↑ Shadow DOM. Mozilla Developer Network. Архів оригіналу за 30 травня 2017. Процитовано 1 грудня 2016.
- ↑ HTML Imports. www.w3.org. Архів оригіналу за 9 червня 2017. Процитовано 2 грудня 2016.
- ↑ Community. Introduction to HTML Imports — WebComponents.org. webcomponents.org. Архів оригіналу за 6 січня 2017. Процитовано 2 грудня 2016.
- ↑ Mozilla and Web Components: Update ★ Mozilla Hacks – the Web developer blog. hacks.mozilla.org. Архів оригіналу за 29 червня 2017. Процитовано 2 грудня 2016.
- ↑ The state of Web Components ★ Mozilla Hacks – the Web developer blog. hacks.mozilla.org. Архів оригіналу за 13 травня 2022. Процитовано 2 грудня 2016.
- ↑ Community. Introduction to the template elements. webcomponents.org. Архів оригіналу за 6 січня 2017. Процитовано 3 грудня 2016.
- ↑ Can I use... Support tables for HTML5, CSS3, etc. Архів оригіналу за 31 січня 2022. Процитовано 2 червня 2017.
- ↑ What's New in Safari. Apple Inc. Архів оригіналу за 26 січня 2017. Процитовано 21 червня 2016.
- ↑ Are We Componentized Yet?. Архів оригіналу за 15 березня 2022. Процитовано 2 червня 2017.
- ↑ Web Components in production use – are we there yet?. vaadin.com (амер.). Архів оригіналу за 30 серпня 2017. Процитовано 21 листопада 2016.
- ↑ Web Components and Model Driven Views by Alex Russell · Fronteers. fronteers.nl. Архів оригіналу за 17 квітня 2022. Процитовано 2 грудня 2016.
- ↑ The state of Web Components. hacks.mozilla.org. Архів оригіналу за 13 травня 2022. Процитовано 2 грудня 2016.
Посилання[ред. | ред. код]
- Webcomponents.org [Архівовано 15 травня 2022 у Wayback Machine.]
- slim.js library [Архівовано 12 січня 2022 у Wayback Machine.]