Веб-компоненты позволяют нам создавать повторно используемые настраиваемые элементы. Самая сильная сторона веб-компонента — его интероперабельность: будучи изначально поддерживаемыми браузерами, веб-компоненты могут использоваться в любой среде HTML, с любой структурой или вообще без нее.
Важным аспектом веб-компонентов является инкапсуляция. Вы можете отделить и скрыть структуру разметки, стиль и поведение, чтобы разные части страницы не конфликтовали.
Таким образом, веб-компоненты идеально подходят для разработки систем дизайна, общих компонентов и встроенных виджетов. Давайте посмотрим, как использовать собственный веб-компонент с лучшими библиотеками в отрасли:
Создавайте веб-компоненты с помощью Lit
Создание веб-компонента с нуля на простом Javascript может быстро превратиться в огромный беспорядок, который трудно масштабировать и поддерживать. К счастью, с помощью Лит мы можем создавать быстрые и легкие веб-компоненты.
В основе Lit лежит базовый класс компонентов, убивающий шаблоны, который обеспечивает реактивное состояние, стили с ограниченной областью действия и декларативную систему шаблонов, которая является крошечной, быстрой и выразительной.
Несмотря на то, что мы будем использовать Lit, я рекомендую научиться разрабатывать веб-компоненты на нативном JS.
Давайте создадим минимальный пользовательский элемент select и посмотрим, как мы можем работать с входными значениями примитивов и объектов. Обратите внимание, что мы не будем обсуждать строительные инструменты. Вы вольны использовать все, что пожелаете.
Начнем с элемента select:
Мы создаем SelectElement и определяем три входа — data, idKey и valKey. Мы также определяем состояние activeItem для отслеживания текущего выбранного элемента. Добавим шаблон:
Мы используем директиву repeat для эффективного рендеринга наших элементов. Он получает три параметра — collection, keyFunction, который принимает один элемент в качестве аргумента и возвращает для него уникальный ключ, и itemTemplate, который принимает элемент и его текущий индекс в качестве аргументов и возвращает TemplateResult.
Щелчок по элементу устанавливает его как активный элемент и отправляет пользовательское событие, которое родитель может прослушать.
Мы используем приятную функцию от Lit, которая называется логические атрибутивные выражения. Атрибут active будет добавлен или удален в зависимости от результата выражения. Мы используем его для стилизации элемента active.
Эта библиотека может оказаться полезной, если вы ищете генератор светящихся файлов:
Теперь, когда у нас есть базовый пользовательский элемент, давайте используем его в каждой библиотеке:
Использование веб-компонентов в Angular
Во-первых, нам нужно использовать схему CUSTOM_ELEMENTS_SCHEMA. Angular игнорирует пользовательские элементы (названные с дефисами), которые он не распознает, а не выдает ошибку.
Теперь мы можем использовать наш веб-компонент ui-select внутри компонента TodosComponent:
Нам не так много нужно сделать. Интеграция Angular с пользовательскими элементами работает из коробки. Он связывает свойство компонента todos со свойством data в элементе ui-select. Привязка события прослушивает событие select-item и вызывает метод onSelectItem() компонента всякий раз, когда оно отправляется.
Использование веб-компонентов в Vue
Как и в случае с Angular, нам нужно сказать Vue игнорировать пользовательские элементы, чтобы он не выдавал ошибки при встрече с пользовательским элементом. Вот как мы можем это сделать в Vite:
См. документы для альтернативных подходов. Теперь мы можем использовать наш пользовательский элемент внутри нашего компонента:
Vue упрощает использование пользовательских элементов. Мы привязываем свойство data элемента к ссылке todos и прослушиваем событие select-item, которое запускает функцию onSelect при отправке.
Использование веб-компонентов в Svelte
Чтобы использовать пользовательские элементы в компонентах Svelte, нам не нужно делать ничего особенного. Импортируйте пользовательский элемент и используйте его:
Использование веб-компонентов в React
React имеет наименее дружественную поддержку пользовательских элементов. Давайте посмотрим, как мы используем это с React:
Поскольку пользовательские элементы не являются компонентами React, они рассматриваются как стандартные элементы HTML. Нам нужно использовать JSON.stringify, потому что значение атрибута data обрабатывается как строка. Lit будет заниматься синтаксическим анализом, так как мы установили свойство data converter в Array.
Нам нужно получить ссылку на пользовательский элемент и зарегистрировать событие вручную, потому что React не поддерживает события пользовательских элементов.
Чтобы сделать его немного чище, вы можете использовать такие библиотеки, как use-custom-element:
Использование веб-компонента в Preact
Поддержка веб-компонентов в Preact намного лучше, чем в React. Средство визуализации Preact определяет, следует ли использовать свойство или атрибут, проверяя элемент DOM.
Нераспознанные свойства обработчика событий, переданные элементу DOM, регистрируются с использованием их регистра точно так, как указано:
Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular и JS!
