Веб -компоненты являются собственным набором функций, которые обеспечивают выдающуюся область стилей и функциональных возможностей. Их можно использовать на обычной веб-странице без фреймвортов, но также и с любым JavaScript Framework по вашему выбору (например, React, Vue, Angular, Svelte и т. Д.). Это делает веб -компоненты отличным для создания многоразовых элементов, которые необходимо обмениваться публично или повторно использоваться в нескольких проектах. По крайней мере, в теории.
В действительности, есть некоторые недостатки, которые могут сделать веб -компоненты почти непригодными для использования в некоторых проектах.
В этой статье я объясню, что делает веб -компоненты великолепными, каковы их недостатки, и я предоставлю некоторое руководство, чтобы помочь вам решить, следует ли использовать их в своих проектах.
Хорошо
Две основные функции, которые делают веб -компоненты мощными, – это Пользовательские элементы API и Shadow Dom Анкет
Пользовательские элементы API – это то, что позволяет вам создавать и регистрировать ваши компоненты в качестве новых HTML -элементов. Это также позволяет вам определить обратные вызовы жизненного цикла для вашего нового элемента. В целом, это довольно здорово и довольно просто для понимания и попадания, как для начинающих, так и для опытных разработчиков.
Shadow Dom – это то, что обеспечивает всю инкапсуляцию стилей. Это дает вашим компонентам свой собственный DOM, который отделен от остальной части вашего документа. Это означает, что глобальные стили не могут повлиять на это (за исключением пользовательских свойств/переменных CSS), и что его собственные стили не могут повлиять на другие элементы в родительском документе.
HTML <Шаблон> и
Поддержка браузера для всех этих функций великолепна: если вы не поддерживаете Internet Explorer, вы вряд ли столкнетесь с любыми нарушителями сделок. Есть одно исключение из этого, которое будет объяснено позже в разделе «Плохая».
Кроме того, как упоминалось в начале статьи, не только веб -компоненты совместимы практически с каждой структурой JavaScript, но и могут использоваться в старом старом ванильном JavaScript без фреймворка. Это связано с тем, что веб -компоненты – это просто классы ES6, расширяющие нативные HTMlelement. Это означает, что вы можете делиться компонентами по всему проекту или всей экосистеме вашей компании.
Кроме того, есть несколько Отличные библиотеки и пакеты, чтобы упростить создание веб -компонентов , а также онлайн -платформа, где вы можете найти и делиться веб -компонентами с другими: webcomponents.org Анкет
Плохо
Вспышка невозможного контента
Давайте начнем с API пользовательских элементов. Единственным недостатком, который я испытал с пользовательскими элементами, является потенциал для вспышки непревзойденного контента. Поскольку пользовательские элементы объявляются и зарегистрированы в JavaScript, им может потребоваться несколько миллисекунд, чтобы они были загружены, обработаны, зарегистрированы и, наконец, отображаются. Пока это происходит, ваш пользовательский элемент остается неизвестным или скрытым.
Это может быть серьезным недостатком маркетингового веб-сайта, где у вас есть всего несколько секунд, чтобы взаимодействовать со своими посетителями, чтобы удержать их внимание, но в веб-приложениях это на самом деле не нарушитель сделки, тем более что кэш вашего браузера резко ослабляет проблема после начальной загрузки.
Вот пример FOUC с веб -компонентом «контейнера» на вкладках на перезагрузке без кэша (на локальном сервере разработки):
Вот тот же компонентный рендеринг на перезагрузке, с кешем браузера (все еще на локальном сервере разработки):
Как видите, кеш браузера делает это не проблема для повторных посещений.
Shadow Dom не хорошо играет с нативными формами
Самая большая проблема, с которой я столкнулся с веб -компонентами, – это тот факт, что они вообще не играют хорошо с функциональными возможностями нативных форм. Это связано с двумя вещами:
- Пользовательские элементы не могут расширять элементы, отличные от
Htmlelement(Без утомительных обходных путей и основных недостатков) ; - Элементы формы внутри теневого DOM не рассматриваются как таковые в родительской форме компонента.
Помните, как Shadow Dom не использует глобальные стили? Это означает, что если вы хотите использовать Внутри веб-компонента вам придется повторно определить стили каждого <вход > , В В <Кнопка> В и больше, в стилях вашего компонента.
Конечно, вы можете сделать каждый из этих элементов своим собственным веб -компонентом, чтобы каждый из них инкапсулировал свои собственные стили. Однако, потому что элементы формы, такие как Htmlinputelement Не может быть расширен по пользовательским элементам, ваш пользовательский входной компонент должен включать в его тени dom. И именно здесь вы сталкиваетесь со следующей проблемой: входные данные (и другие элементы формы) в теневой DOM не считаются частью формы.
Например, если кнопка отправки формы находится внутри DOM Shadow, форма больше не может быть отправлена, нажав Enter Внутри ввода, если вы не добавите свой собственный Keydown Слушатель событий, чтобы повторить эту функцию самостоятельно.
Вот еще один пример, который немного сложнее и показывает. Если вы хотите сделать пользовательский ввод, у вас есть три решения:
- Вы можете генерировать
В обычном DOM, помимо вашего пользовательского элемента, и вручную реплицировать кучу встроенных функций, чтобы убедиться, что ваш ввод в любое время синхронизируется в любое время, выпускает правильные события, подтверждается, доступен, хорошо выглядит и хорошо работает. - Вы можете сделать каждый элемент формы, включая
Сам, его собственный веб -компонент и отказаться от родногоЭлементы для всего вашего проекта. - Обработайте каждую форму, которая использует этот пользовательский элемент ввода с помощью JavaScript
Если вы уже находитесь в среде с высокой степенью JavaScript, где каждая отдельная форма обрабатывается с помощью JavaScript, и каждая реализация компонентов уже требует большой работы, чтобы быть полезным и доступным, это может показаться не серьезной проблемой.
Однако, если вы более ориентированы на ваниль, новее веб-разработка или просто любите простые решения и среды, это, вероятно, будет основным нарушителем сделок.
Неизлежащий процент веб-компонентов, которые я хотел бы создать, предназначен для работы с формами или элементами формы так или иначе, и я ожидаю, что это то же самое для большинства других разработчиков.
Уродливый
Хуже всего то, что в Интернете не так много информации о том, что делается, чтобы исправить или обойти эту проблему несовместимости с родными формами.
Библиотеки веб -компонентов, такие как Шнурка Просто реализуйте свой собственный элемент формы, с которым нужно обрабатывать вручную в JavaScript.
Библиотеки, которые стремятся помочь создать веб -компоненты, такие как Google Горит , не может разрешить расширение встроенных элементов Потому что Safari не поддерживает настройку встроенных встроенных встроенных. Анкет
Где мы стоим и должны ли вы их использовать
В целом, всего через несколько недель/месяцев после того, как отправился в путешествие по веб -компонентам с большой улыбкой и сверкающими глазами, я не нахожусь не пессимистичным, но немного разочарованным из -за текущего состояния веб -компонентов и их будущего за пределами JavaScript Framework Projects и Ecosystems.
Я все еще верю, что идея и общая реализация веб -компонентов великолепны. Но недостатки, когда дело доходит до нативных форм, делают их гораздо менее простыми для обучения и внедрения.
Вы должны использовать веб -компоненты …
- Если вы уже обращаетесь со всеми своими формами вручную в JavaScript
- Если у вас есть (или планируете иметь) несколько проектов или экосистем с различными технологическими стеками, в которых вам необходимо поделиться/повторно использовать компоненты
- Если вы не против потратить много времени, чтобы повторно встроить встроенные функции и доступность, прежде чем вы действительно можете начать работать над своими собственными функциями, связанными с бизнесом (или если вы можете использовать существующую библиотеку компонентов, такую как shoelace В начальное время разработки и затраты)
- … или если вам не нужно, чтобы ваши компоненты взаимодействовали с формами или элементами формы
Вы не должны использовать веб -компоненты …
- Если вы хотите сохранить возможность использовать собственные формы
- Если вам нужно поддерживать устаревшие браузеры
Свет на расстоянии
Сразу после того, как я первоначально опубликовал эту статью, @Westbrook прокомментировал, чтобы сообщить мне о Elementinternals Spec который в настоящее время реализован в Google Chrome (однако, не в Safari или Firefox). После доступного в каждом браузере это может быть достоверным решением проблем, связанных с формой, которые я упомянул в статье.
Ознакомьтесь с следующими статьями, чтобы узнать больше об этой спецификации, ее реализации и доступных полифилле:
- Более способные элементы управления формой (web.dev) Анкет
- Создание пользовательских элементов управления формой с помощью elementinternals (CSS-Tricks)
Последняя вещь…
Если вы не находитесь в среде с тяжелой JavaScript, но все равно хотели бы использовать веб-компоненты для ваших форм (например, вы создаете веб-приложение Laravel или Symfony), вы всегда должны разработать универсальный обработчик формы, чтобы преодолеть Проблемы, которые описаны в этой статье.
Конечно, это сложнее, чем просто использовать нативные формы, и это потребует от вас, чтобы сделать больше разработки и тестирования, прежде чем вы сможете начать, но, вероятно, самый простой обходной путь.
Если у вас есть какой -либо другой обходной путь или решения, я бы хотел увидеть их здесь, в комментариях или в Твиттере.
Оригинал: “https://dev.to/emileperron/web-components-in-2021-the-good-the-bad-and-the-ugly-3kg”