Какво представляват уеб компонентите?
Уеб компонентите са персонализирани уеб елементи за многократна употреба, които капсулират функционалност, структура на маркиране и стил чрез използване на ванилен javascript/HTML/CSS заедно с естествени уеб API.
Персонализираните елементи учат браузъра на нови трикове, като същевременно запазват предимствата на HTML
Те могат да се използват в шаблона като общи HTML елементи (напр. <p> или <span>).
<body> <p>a simple paragraph</p> <script type="module" src="my-custom-element.js"></script> <my-custom-element></my-custom-element> </body>
Те се основават на синтаксиса на класа ECMAScript 2015 чрез разширяване на HTMLElement interface, който доставя полезни API за манипулиране на елемента или реагиране на събития.
class MyCustomElement extends HTMLElement {}
Можете също така да разширите съществуващи HTML елементи като HTMLInputElement, HTMLButtonElement или HTMLParagraphElement, за да наследите техните свойства и методи. По този начин можете да създадете свои собствени реализации на общи HTML елементи.
Куки за жизнения цикъл
Има няколко предварително дефинирани функции за обратно извикване, които можете да използвате, за да реагирате на конкретни събития от жизнения цикъл, като
connectedCallback— това обратно извикване се извиква всеки път, когато вашият елемент бъде вмъкнат в DOMdisconnectedCallback— се извиква всеки път, когато елементът бъде премахнат от DOM дървото
Тези обратни извиквания са полезни за безопасно извличане/достъп до данни или изпълнение на някакъв код за почистване.
Shadow DOM
Капсулирането на структурата на стила и маркирането се постига чрез прикачване на така наречения Shadow DOM към вашия уеб компонент, който създава скрито DOM дърво под вашия персонализиран HTML елемент.
Shadow DOM е полезен, когато маркирането и стилът на компонентите трябва да останат незасегнати от глобалните дефиниции на стила.
Поддръжка на браузър
Уеб компонентите се поддържат от всички съвременни браузъри като Chrome, Firefox и Opera (за Edge, Safari и IE11 можете да използвате polyfills).
Рамки
Има няколко рамки, които ще ускорят развитието на вашия уеб компонент, като Polymer или Hybrids. Преди да добавите рамката по ваш избор към вашия проект, опитайте се да прецените дали наистина ще имате нужда от тази допълнителна зависимост.
В случай, че искате да създадете само няколко прости компонента, а не цяла библиотека с компоненти, трябва да изберете пътя без рамка.
Внедряване на уеб компонент
След като изяснихме всички необходими основи, нека си изцапаме ръцете и внедрим ванилен уеб компонент. Целта е да се създаде основен уеб компонент, който съдържа капсулирани стилове/маркиране и който може лесно да се разширява.
В края на тази статия ще намерите и връзка към моето просто хранилище на шаблони за уеб компоненти.
Настройвам
За целите на демонстрацията ще създадем проста уеб страница, където ще се използва нашия персонализиран уеб елемент.
За да проверя дали персонализираният ни елемент работи според очакванията, ще използвам инструмента serve, за да хоствам нашата проста уеб страница.
С serve просто ще трябва да изпълните командата serve . в директорията, където се намира вашата проста уеб страница, за да стартирате уеб сървър, който я хоства на localhost:5000.
Фондацията
Първо ще разширим интерфейса HMTMLElement, за да получим необходимите API и да регистрираме нашия клас като персонализиран елемент, така че да можем да го използваме в нашата примерна HTML страница.
Вече можете да го добавите към уеб страницата, като импортирате javascript файла и като вмъкнете html тага, който сме дефинирали в customElements.define()call като първи аргумент.
Не забравяйте да импортирате javascript файла като type="module", в противен случай той няма да се зареди.
Сега вече изпълнихме необходимите стъпки за използване на нашия собствен уеб компонент. Разбира се, нашият персонализиран елемент все още няма съдържание, но ще променим това в следващия раздел.
С тази солидна основа ще продължим и ще добавим капсулирана структура и стилове за маркиране към нашия персонализиран елемент, като използваме Shadow DOM API.
Използване на Shadow DOM
Както вече споменахме, Shadow DOM е скрито DOM дърво, което е прикрепено към вашия потребителски елемент. Това гарантира, че стиловете на нашия потребителски елемент не се влияят от глобални или други стилове на елементи.
Нека прикрепим Shadow DOM към нашия потребителски елемент. Ще направим това в constructor и ще изберем open като желания режим на капсулиране.
Когато задаваме режима на капсулиране на open, ние се уверяваме, че нашите дъщерни елементи на Shadow DOM са достъпни чрез javascript.
След това трябва да добавим шаблон и някои стилове към нашия потребителски елемент.
Забележете, че нашата структура за маркиране се намира в a<template> HTML елемент, който няма да се показва на изобразената уеб страница.
Сега уеб страницата трябва да показва персонализирания елемент.
Сега, за да докажем, че нашите персонализирани стилове са капсулирани и не се влияят от глобалните стилове, ние добавяме глобални стилове и прост елемент на заглавие към нашия index.html файл.
Уеб страницата изобразява двете заглавия, но с различни стилове.
Току-що създадохте прост, персонализиран уеб елемент с капсулиран стил, като използвате просто ванилен javascript. Използвайте го като отправна точка и го разширете според вашите предпочитания, за да създадете свои собствени уникални уеб елементи.
Можете да намерите целия пример тук:
