5 вопросов о веб-компонентах
В этой статье мы постараемся ответить на следующие вопросы, связанные с веб-компонентами:
- Что такое веб-компоненты?
- Каковы некоторые из основ веб-компонентов?
- Каковы некоторые приложения веб-компонентов?
- Каковы некоторые ограничения веб-компонентов?
- Простое демо.
Что такое веб-компоненты?
Проще говоря, веб-компоненты используются для создания пользовательских HTML-элементов или расширения существующего HTML-элемента (для обеспечения ваших пользовательских функций).
API-интерфейсы веб-компонентов являются частью стандартного API-интерфейса веб-платформы и соответствуют существующим веб-стандартам, что означает, что веб-компоненты работают в современном браузере без участия третьих лиц.
Каковы некоторые из основ веб-компонентов?
API пользовательских элементов:
Набор собственных API-интерфейсов Javascript (т.е. работает непосредственно в браузере), который позволяет разработчику определять собственные элементы HTML или расширять существующие.
- Пользовательский элемент может быть определен следующим образом:
2. connectedCallback, disconnectedCallback, adoptedCallback и attributeChangedCallback являются событиями жизненного цикла. Подробности читайте в комментариях на скриншоте.
3. Этот пользовательский элемент можно использовать как обычный HTML-элемент, как показано ниже:
4. Мы также можем расширить существующий элемент HTML, определив пользовательский элемент следующим образом:
5. Теперь мы можем использовать div следующим образом для использования в качестве my-custom-element :
Shadow DOM (объектная модель документа)
Независимое дерево DOM, которое отображается отдельно от основного DOM. Shadow DOM может быть присоединен к любому узлу в основном DOM. Shadow DOM позволяет записывать и стилизовать пользовательские элементы отдельно, не опасаясь столкновения с основным DOM.
- ShadowDOM содержит все, что находится внутри красного квадрата.
- CSS, определенный внутри ShadowDOM, не влияет на «обычный div» снаружи. Точно так же CSS, определенный в основном DOM, не влияет на div внутри ShadowDOM.
- Обратите внимание, #shadow-root (open)Этопоказывает, что ShadowDOM был создан в открытом режиме. Открытый режим делает ShadowDOM доступным извне с помощью DOM javascript API, как показано ниже:
4. Если ShadowDOM создавался в закрытом режиме, то ShadowDom только. доступен изнутри пользовательского элемента (то есть: msg-component), и приведенная выше команда вернет null, как показано ниже:
HTML-шаблоны
‹template› можно использовать для повторного использования одной и той же структуры HTML в разных веб-компонентах, а ‹slot› можно использовать для интерполяции динамических данных в HTML (т. е. он будет отображать значение, переданное веб-компоненту как дочерний элемент, или значение по умолчанию, если ни один дочерний элемент не прошедший).
- Мы можем определить шаблон в любом месте html-файла. У него должен быть уникальный идентификатор, чтобы мы могли получить шаблон с помощью метода getElementById. Шаблон может инкапсулировать любую структуру HTML, включая тег стиля.
2. Приведенный выше шаблон можно прикрепить к веб-компоненту следующим образом:
3. Он отобразит Hello World, если в ‹hello-msg-component› не передано дочернее значение, так как World является значением по умолчанию.
4. Или он будет отображать любое значение, переданное в качестве дочернего элемента ‹hello-msg-component›.
Приложения веб-компонентов?
1. Свобода фреймворка:
Поскольку веб-компоненты изначально работают в современном браузере (без необходимости использования какой-либо сторонней библиотеки). Это качество делает их совместимыми с любым фреймворком или библиотекой, поскольку веб-компонент ничем не отличается от любых других элементов HTML. Это позволяет различным командам и организациям быть независимыми от фреймворка, что означает, что они могут выбирать любую инфраструктуру или библиотеку, которую они хотят использовать, и при этом иметь общие компоненты пользовательского интерфейса, написанные в веб-компоненте.
2. Последовательный UI/UX по всем направлениям:
Используя ShadowDOM, css можно заблокировать внутри веб-компонента, что означает, что css, определенный внутри ShadowDOM, нельзя манипулировать или переопределять извне (например, css приложения). Это приведет к согласованному UI/UX по всем направлениям. Например: если вам нужна круглая кнопка во всех ваших продуктах, вы просто создадите веб-компонент кнопки с круглой кнопкой css, заблокированной внутри теневого DOM, и это не позволит какой-либо команде переопределить ее преднамеренно или случайно.
Ограничения веб-компонентов:
Как и все остальное, веб-компоненты имеют некоторые компромиссы, о которых вы должны знать, прежде чем использовать их.
1. Поддержка устаревших браузеров:
Веб-компоненты хорошо работают во всех современных браузерах, но когда дело доходит до устаревших браузеров (например, 11), вам нужно добавить некоторые полифиллы для поддержки веб-компонентов.
2. Кривая обучения:
Поскольку веб-компоненты относительно не так известны, как React или Angular, у большинства разработчиков пользовательского интерфейса нет прошлого опыта их использования, а концепция shadowDOM может быть сложной для понимания поначалу.
3. Скрипты автоматизации:
Если у вас есть сценарии автоматизации для тестирования, вам может потребоваться настроить эти сценарии, чтобы они работали для веб-компонентов. Например: скрипт для нажатия обычной кнопки может не работать с пользовательской кнопкой из-за Shadow DOM.
Демо:
Вот простой калькулятор, написанный полностью с использованием веб-компонентов
