www.wikidata.uk-ua.nina.az

Веб компоненти Web Components вебкомпоненти це набір функцій що додаються консорціумом W3C до специфікацій HTML та DOM я

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

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

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

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

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

Деталі ред.

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

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

Shadow DOM ред.

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

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

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

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

HTML Import ред.

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

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

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

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

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

HTML Template ред.

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

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

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

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

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

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

Бібліотеки ред.

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

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

Історія ред.

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

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

Зноски ред.

  1. . Архів оригіналу за 16 травня 2022. Процитовано 2 червня 2017. 
  2. . www.w3.org. Архів оригіналу за 9 червня 2017. Процитовано 1 грудня 2016. 
  3. . Dimitri Glazkov. 15 січня 2011. Архів оригіналу за 17 червня 2017. Процитовано 1 грудня 2016. 
  4. . Google Developers (англ.). Архів оригіналу за 24 червня 2017. Процитовано 1 грудня 2016. 
  5. . Mozilla Developer Network. Архів оригіналу за 30 травня 2017. Процитовано 1 грудня 2016. 
  6. . www.w3.org. Архів оригіналу за 9 червня 2017. Процитовано 2 грудня 2016. 
  7. Community. . webcomponents.org. Архів оригіналу за 6 січня 2017. Процитовано 2 грудня 2016. 
  8. . hacks.mozilla.org. Архів оригіналу за 29 червня 2017. Процитовано 2 грудня 2016. 
  9. . hacks.mozilla.org. Архів оригіналу за 13 травня 2022. Процитовано 2 грудня 2016. 
  10. Community. . webcomponents.org. Архів оригіналу за 6 січня 2017. Процитовано 3 грудня 2016. 
  11. . Архів оригіналу за 31 січня 2022. Процитовано 2 червня 2017. 
  12. . Apple Inc. Архів оригіналу за 26 січня 2017. Процитовано 21 червня 2016. 
  13. . Архів оригіналу за 15 березня 2022. Процитовано 2 червня 2017. 
  14. . vaadin.com (амер.). Архів оригіналу за 30 серпня 2017. Процитовано 21 листопада 2016. 
  15. . fronteers.nl. Архів оригіналу за 17 квітня 2022. Процитовано 2 грудня 2016. 
  16. . hacks.mozilla.org. Архів оригіналу за 13 травня 2022. Процитовано 2 грудня 2016. 

Посилання ред.

Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри
Дата публікації:
Web Components vebkomponenti ce nabir funkcij sho dodayutsya konsorciumom W3C do specifikacij HTML ta DOM yaki dozvolyat stvorennya povtorno vikoristovnih vidzhetiv en chi komponentiv u zastosunkah ta dokumentah veb Metoyu ye prinesti komponentno oriyentovane programuvannya u World Wide Web Model komponentiv dozvolyaye inkapsulyaciyu ta interoperabelnist okremih elementiv HTML Web komponenti skladayutsya z 4 osnovnih detalej yaki mozhut vikoristovuvatis okremo abo poodinci Custom Elements specialni elementi API dlya viznachennya novih HTML elementiv Shadow DOM inkapsulovanij DOM ta stili z kompoziciyeyu HTML Imports deklarativni metodi importuvannya HTML dokumentiv v inshi dokumenti HTML Templates shablon 1 yakij dozvolyaye dokumentam mistiti inertni angl inert ne vklyucheni v storinku chastini DOMZmist 1 Detali 1 1 Specialni elementi 1 2 Shadow DOM 1 3 HTML Import 1 4 HTML Template 2 Pidtrimka brauzerami 3 Biblioteki 4 Istoriya 5 Znoski 6 PosilannyaDetali red Specialni elementi red Ye dva vidi specialnih elementiv avtonomni specialni elementi i zmineni vbudovani elementi Avtonomni specialni elementi ce HTML elementi yaki povnistyu viddileni vid standarnih elementiv HTML i po suti stvoryutsya vid fundamentu z dopomogoyu API specialnih elementiv Zmineni vbudovani elementi ce elementi yaki buduyutsya na osnovi standartnih elementiv HTML i perevikoristovuyut yih funkcionalnist 2 Shadow DOM red Shadow DOM ce funkcionalnist sho dozvolyaye brauzeru vidobrazhati DOM elementi ne dodayuchi yih v golovne DOM derevo dokumenta Rezultatom cogo ye te sho CSS diye lishe v mezhah Shadow DOM pevnogo elementa i taki komponenti mozhut vstavlyatis bez riziku togo sho CSS stili vitechut i zachiplyat elementi yaki ne mali b zachipati Hocha ci elementi inkapsulyuyutsya shodo HTML ta CSS ale voni vse zh mozhut generuvati podiyi yaki vidlovlyuyutsya inshimi elementami dokumenta 3 4 Pidderevo elementa yake mistit Shadow DOM nazivayetsya shadow tree Element do yakogo priv yazane shadow tree nazivayetsya shadow host Shadow DOM zavzhdi povinen kripitis do isnuyuchogo komponenta cherez priv yazku jogo yak literala abo skriptami V JavaScript Shadow DOM prikriplyuyetsya do elementa za dopomogoyu metoda Element attachShadow 5 Zdatnist obmezhuvati oblast vidimosti HTML ta CSS klyuchova dlya stvorennya Custom Elements Yaksho b shadow DOM ne isnuvav rizni specialni elementi mogli b vzayemodiyati neperedbachuvanimi i nebazhanimi sposobami HTML Import red HTML import ce instrument dlya vklyuchennya HTML dokumentiv ta vebkomponentiv iz zovnishnih dzherel bez vikoristannya zapitivAJAX chi podibnih metodiv 6 Sintaksis importu v HTML viglyadaye tak lt link rel import href mydocument html gt Shob uniktuni zavantazhennya ta vikonannya skriptiv yaki vprovadzhuvatimutsya z importom dvichi HTML import propuskaye zavantazhennya fajliv yaki vzhe buli zavantazheni do togo 7 Mozilla Firefox ne maye pidtrimki HTML import i ne maye namiru yiyi realizovuvati 8 9 HTML Template red HTML template ce sposib stvoryuvati shmatki HTML yaki budut vstavlyatis v dokument pri bazhanni Sintaksis HTML template viglyadaye tak lt template gt lt p gt The HTML you wish to instantiate on will lt p gt lt template gt Skripti vseredini ne spracyuyut a resursi ne zavantazhatsya poki shablon ne bude vikoristanij v dokumenti 10 Pidtrimka brauzerami red HTML Templates pidtrimuyutsya v Google Chrome Mozilla Firefox Microsoft Edge Safari ta Opera 11 Pidtrimka rannih versij specialnih elementiv ta Shadow DOM vidomih yak v0 prisutnya v deyakih brauzeriv na osnovi Blink takih yak Google Chrome Opera ta Mozilla Firefox v ostannomu potrebuye ruchnoyi zmini nalashtuvan Novishe API specialnih elementiv ta Shadow DOM v1 realizovane v Safari 10 12 Google Chrome 53 0 2785 ta rozroblyayetsya v Mozilla Firefox Microsoft Edge she ne pochav realizaciyu specialnih elementiv chi Shadow DOM 13 Biblioteki red Ye kilka bibliotek sho pobudovani navkolo vebkomponentiv z metoyu zbilshennya rivnya abstrakciyi pri stvorenni specialnih elementiv Chotirma najvidomishimi ye X Tag Slim js Polymer ta Bosonic Dvoye z nih Bosonic ta Polymer nadayut gotovi komponenti yaki mozhna vilno vikoristovuvati Ci komponenti vzayemozaminni bo pobudovani na osnovi vidkritih veb tehnologij 14 proyasniti Istoriya red Web komponenti buli vpershe prezentovani Aleksom Rasselom na Fronteers Conference 2011 15 Polymer biblioteka na osnovi Web komponentiv bula vipushena Google v 2013 16 Znoski red Arhivovana kopiya Arhiv originalu za 16 travnya 2022 Procitovano 2 chervnya 2017 Custom Elements www w3 org Arhiv originalu za 9 chervnya 2017 Procitovano 1 grudnya 2016 What the Heck is Shadow DOM Dimitri Glazkov 15 sichnya 2011 Arhiv originalu za 17 chervnya 2017 Procitovano 1 grudnya 2016 Shadow DOM v1 Self Contained Web Components Web Google Developers Google Developers angl Arhiv originalu za 24 chervnya 2017 Procitovano 1 grudnya 2016 Shadow DOM Mozilla Developer Network Arhiv originalu za 30 travnya 2017 Procitovano 1 grudnya 2016 HTML Imports www w3 org Arhiv originalu za 9 chervnya 2017 Procitovano 2 grudnya 2016 Community Introduction to HTML Imports WebComponents org webcomponents org Arhiv originalu za 6 sichnya 2017 Procitovano 2 grudnya 2016 Mozilla and Web Components Update Mozilla Hacks the Web developer blog hacks mozilla org Arhiv originalu za 29 chervnya 2017 Procitovano 2 grudnya 2016 The state of Web Components Mozilla Hacks the Web developer blog hacks mozilla org Arhiv originalu za 13 travnya 2022 Procitovano 2 grudnya 2016 Community Introduction to the template elements webcomponents org Arhiv originalu za 6 sichnya 2017 Procitovano 3 grudnya 2016 Can I use Support tables for HTML5 CSS3 etc Arhiv originalu za 31 sichnya 2022 Procitovano 2 chervnya 2017 What s New in Safari Apple Inc Arhiv originalu za 26 sichnya 2017 Procitovano 21 chervnya 2016 Are We Componentized Yet Arhiv originalu za 15 bereznya 2022 Procitovano 2 chervnya 2017 Web Components in production use are we there yet vaadin com amer Arhiv originalu za 30 serpnya 2017 Procitovano 21 listopada 2016 Web Components and Model Driven Views by Alex Russell Fronteers fronteers nl Arhiv originalu za 17 kvitnya 2022 Procitovano 2 grudnya 2016 The state of Web Components hacks mozilla org Arhiv originalu za 13 travnya 2022 Procitovano 2 grudnya 2016 Posilannya red Webcomponents org Arhivovano 15 travnya 2022 u Wayback Machine slim js library Arhivovano 12 sichnya 2022 u Wayback Machine Otrimano z https uk wikipedia org w index php title Veb komponenti amp oldid 36027201