Web Components: собствени елементи с определен жизнен цикъл

Полезно е да знаеш

Web Components обединява браузърни технологии за създаване на повторно използваеми собствени елементи. Сред тях са custom elements, Shadow DOM и HTML шаблоните. Всеки механизъм има различна задача: определяне на собствен елемент, капсулиране на част от структурата и подготвяне на съдържание за повторно използване. Те могат да работят заедно, но не са едно и също понятие. Разграничаването им помага да се избере точно необходимата част, вместо всеки компонент да бъде излишно сложен. [1]

Custom element се определя чрез JavaScript и се регистрира за използване в документа. Стандартните механизми предоставят и функции, свързани с жизнения му цикъл. Например connectedCallback се извиква при добавяне към документа, а disconnectedCallback — при премахване. Промените на наблюдаваните атрибути могат да бъдат обработвани чрез attributeChangedCallback. [2] Така поведението не е ограничено до първоначалното създаване. Елементът може да бъде включван, изключван и обновяван в различни части от живота на страницата.

Нека разгледаме измислен компонент за превключване между два начина на преглед на снимки. Той има начален избор, бутони и област с резултат. Преди реализацията можем да опишем входа и изхода: как се задава началният режим и как останалата страница разбира, че изборът е променен. Това е договорът на компонента. Самото използване на собствен HTML елемент не гарантира, че този договор е удобен или последователен. Той трябва да бъде обмислен според задачата.

Shadow DOM позволява прикрепване на отделно DOM дърво към елемент и е част от механизмите за капсулиране. [1] Това е полезно за организацията на компонент, но не отменя нуждата той да се използва разбираемо в страницата. В учебен пример можем да посочим кои части принадлежат на вътрешната реализация и кои са предназначени за настройване отвън. Така екипът избягва случайни зависимости от вътрешна подредба, която може да се промени при следваща редакция.

Практическата проверка трябва да включи повече от първото показване. Добавяме компонента, променяме настройка, премахваме го и го включваме отново. При всеки етап записваме очаквания избор и реакцията на бутоните. Това е особено полезно, когато компонентът регистрира слушатели или поддържа временна работа. Целта е едно действие да има един предвидим резултат, независимо дали елементът е нов или вече е бил използван по-рано в същата страница.

Добре определеният компонент има малък и ясен интерфейс: разбираеми атрибути, описани събития и проверими състояния. Това позволява повторна употреба без копиране на скрити предположения. Web Components предоставя стандартните механизми, но устойчивостта на решението идва от границата между компонента и останалия документ. Когато тази граница е ясна, отделните части могат да бъдат променяни и изпитвани по-предвидимо, а поведението остава разбираемо за човека, който ги използва.