Azərbaycanca AzərbaycancaБеларускі БеларускіDansk DanskDeutsch DeutschEspañola EspañolaFrançais FrançaisIndonesia IndonesiaItaliana Italiana日本語 日本語Қазақ ҚазақLietuvos LietuvosNederlands NederlandsPortuguês PortuguêsРусский Русскийසිංහල සිංහලแบบไทย แบบไทยTürkçe TürkçeУкраїнська Українська中國人 中國人United State United StateAfrikaans Afrikaans
Підтримка
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.{{}}: Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title ()
  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, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет

Web Components vebkomponenti ce nabir funkcij sho dodayutsya konsorciumom W3C do specifikacij HTML ta DOM yaki dozvolyat stvorennya povtorno vikoristovnih 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 yakij dozvolyaye dokumentam mistiti inertni angl inert ne vklyucheni v storinku chastini DOMDetaliSpecialni elementi 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 Shadow DOM 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 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 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 HTML import ce instrument dlya vklyuchennya HTML dokumentiv ta vebkomponentiv iz zovnishnih dzherel bez vikoristannya zapitivAJAX chi podibnih metodiv 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 Mozilla Firefox ne maye pidtrimki HTML import i ne maye namiru yiyi realizovuvati HTML Template 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 Pidtrimka brauzeramiHTML Templates pidtrimuyutsya v Google Chrome Mozilla Firefox Microsoft Edge Safari ta Opera 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 Google Chrome 53 0 2785 ta rozroblyayetsya v Mozilla Firefox Microsoft Edge she ne pochav realizaciyu specialnih elementiv chi Shadow DOM BibliotekiYe 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 proyasniti IstoriyaWeb komponenti buli vpershe prezentovani Aleksom Rasselom na Fronteers Conference 2011 Polymer biblioteka na osnovi Web komponentiv bula vipushena Google v 2013 Znoski Arhiv originalu za 16 travnya 2022 Procitovano 2 chervnya 2017 a href wiki D0 A8 D0 B0 D0 B1 D0 BB D0 BE D0 BD Cite web title Shablon Cite web cite web a Obslugovuvannya CS1 Storinki z tekstom archived copy yak znachennya parametru title posilannya www w3 org Arhiv originalu za 9 chervnya 2017 Procitovano 1 grudnya 2016 Dimitri Glazkov 15 sichnya 2011 Arhiv originalu za 17 chervnya 2017 Procitovano 1 grudnya 2016 Google Developers angl Arhiv originalu za 24 chervnya 2017 Procitovano 1 grudnya 2016 Mozilla Developer Network Arhiv originalu za 30 travnya 2017 Procitovano 1 grudnya 2016 www w3 org Arhiv originalu za 9 chervnya 2017 Procitovano 2 grudnya 2016 Community webcomponents org Arhiv originalu za 6 sichnya 2017 Procitovano 2 grudnya 2016 hacks mozilla org Arhiv originalu za 29 chervnya 2017 Procitovano 2 grudnya 2016 hacks mozilla org Arhiv originalu za 13 travnya 2022 Procitovano 2 grudnya 2016 Community webcomponents org Arhiv originalu za 6 sichnya 2017 Procitovano 3 grudnya 2016 Arhiv originalu za 31 sichnya 2022 Procitovano 2 chervnya 2017 Apple Inc Arhiv originalu za 26 sichnya 2017 Procitovano 21 chervnya 2016 Arhiv originalu za 15 bereznya 2022 Procitovano 2 chervnya 2017 vaadin com amer Arhiv originalu za 30 serpnya 2017 Procitovano 21 listopada 2016 fronteers nl Arhiv originalu za 17 kvitnya 2022 Procitovano 2 grudnya 2016 hacks mozilla org Arhiv originalu za 13 travnya 2022 Procitovano 2 grudnya 2016 PosilannyaWebcomponents org 15 travnya 2022 u Wayback Machine slim js library 12 sichnya 2022 u Wayback Machine

Дата публікації:
Топ