Web Components & Shadow DOM

Веб-компоненты — совокупность стандартов, которая позволяет создавать новые, пользовательские HTML-элементы со своими свойствами, методами, инкапсулированными DOM и стилями.

Существует два вида пользовательских элементов (Custom Elements):

1. Автономные пользовательские элементы – «полностью новые» элементы, расширяющие абстрактный класс HTMLElement.

2. Пользовательские встроенные элементы – элементы, расширяющие встроенные, например кнопку HTMLButtonElement и т.п.

В модульном теге script, мы определили новый класс который c помощью метода customElements.define() определили за тегом my-webcomp.

А добавив код в метод connectedCallback() мы обеспечили его вызов при добавлении реализации компонента в дерево.

Cуществует ряд дополнительных методов, связанных с жизненным циклом элемента. Обращение к ним происходит в различные моменты:

• connectedCallback вызывается при добавлении элемента в документ (в общем случае несколько раз, так как элемент может быть перемещён или удалён и заново добавлен);

• disconnectedCallback — в противоположность connectedCallback;

• attributeChangeCallback срабатывает при модификации атрибутов из специального списка.

Пример:

Долгое время использование id считалось дурным тоном, потому что на значительных объемах кода они могли дублироваться, что приводило к коллизиям. Однако, с появлением технологии теневого дерева можно внутреннее содержимое элемента изолировать использовать id, стили и прочие ресурсы без опасений. Для веб-компонентов включается теневое дерево следующим образом:

Визуально работа этого кода опять никак не изменится, но теперь в глобальном пространстве имен не будет никакого helloLabel, а у на странице уже 2 элемента с таким идентификатором. А получить доступ к ним можно будет например вот так:

Теперь правда все DOM обращения к this придется заменить на this.shadowRoot благо их пока не так много.

Useful links:

Быстрый старт с WebComponentsMedium

Сила и мощь веб-компонентовTproger