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

Що таке веб компонент

Веб компонент (web component) — це самостійний елемент інтерфейсу в браузері і є зв’язкою коду, що складається з HTML, CSS і JavaScript. Яскравим прикладом веб компонента може бути аудіо (або відео) плеєр. Він вставляється в сторінку за допомогою тега <audio> (або <video>) та відображається на ній як ізольований елемент інтерфейсу. Його код є недоступним для веб-розробника, ми ніяк не можемо впливати, наприклад, на його стилі і навпаки його стилі ніяк не впливають на його елементи. CSS каскадування в цьому випадку не працює, стилі ізольовані або, інакше, інкапсульовані. У цьому полягає перевага веб компонентів, їх можна багаторазово використовувати на сайті або в веб додатку і не переживати, що вони якось вплинуть на навколишній код.

Веб компоненти базуються на трьох поняттях: теги користувача (Custom elements), HTML шаблони (templates) і, так званий, Shadow DOM.

Custom elements

Користувальницькі теги або елементи – це HTML елементи, яких немає в стандарті, веб-розробники можуть створити власні теги елементів, на кшталт елементів <audio> або <video>, і використовувати їх на сторінці сайту або веб-додатків поряд з іншими визначеними елементами.

HTML templates

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

Shadow DOM

Shadow DOM це дуже важливий аспект веб-компонентів. Цей механізм дозволяє інкапсулювати код (наприклад, CSS) усередині компонента, що означає, що він не впливатиме на елементи, що оточують компонент, але може бути вільно використаний усередині.

Створення веб-компонентів

Використання веб компонентів здатні істотно полегшити роботу розробників і створення сайтів може тривати менше часу. Але, на жаль, веб компоненти стали підтримуватися в браузерах не так давно, і їх підтримка все ще є неповною, тому завдання створення власного компонента є дуже нетривіальним. Але, на щастя, розвиток веб-технологій не стоїть на місці і існують інструменти, здатні покращити ситуацію.

Популярний фреймворк для розробки сайтів, веб додатків, мобільних додатків і навіть додатків для ПК від компанії Google, який називається Angular, є відмінним інструментом для створення власних веб компонентів, він здатний заповнити всі порожнечі в підтримці браузерами. На сьогоднішній день навіть існує позиція Angular веб-розробник, настільки цей фреймворк потужний і популярний.

Про те, як створити власні веб компоненти та інші статті на тему Angular читайте в моєму блозі.