Кристьян Оддссон рассказал об опыте использования веб-компонентов в GitHub — "How we use Web Components at GitHub".

В 2018 году GitHub завершил модернизацию фронтенд-кода, который был очень сильно завязан на jQuery. С того момента ребята разработали Ruby-фреймворк ViewComponent для создания независимых компонентов-вьюх и библиотеку Catalyst для упрощения разработки веб-компонентов, которая была вдохновлена Stimulus и LitElement.

Веб-компоненты в GitHub используются для серверной валидации форм, создания динамических фильтров, элементов ввода с автодополнением, для элемента копирования текста в буфер обмена, модальных окон и т.п. При открытии их исходного кода разработчики удаляют все зависимости (то есть заменяют код стандартными веб-компонентами), чтобы их компонентами можно было воспользоваться в любом проекте.

#webcomponents

https://github.blog/2021-05-04-how-we-use-web-components-at-github/
https://github.com/github/github-elements (репозиторий компонентов)

P.S. Благодарю Олега Ковалёва (@oleg_log) за наводку на статью.

Буквально за день до выхода статьи про веб-компоненты от GitHub Тайлер Уильямс рассказал об опыте использования веб-компонентов в GitLab — "Using web components to encapsulate CSS and resolve design system conflicts".

В GitLab веб-компоненты используются для инкрементального внедрения новой дизайн системы с изоляцией стилей. Для этого был создан специальный кастомный элемент slp-blog, в котором отображается статически сгенерированный HTML статьи с новым набором стилей. Если по какой-то причине загрузка JS-кода, отвечающего за инициализацию элемента, отваливается, то пользователь всё равно сможет прочитать статью, но без стилизации.

В общем, статья интересная. Почитайте, если хотите познакомиться с ещё одним сценарием использования веб-компонентов.

#webcomponents #css

https://about.gitlab.com/blog/2021/05/03/using-web-components-to-encapsulate-css-and-resolve-design-system-conflicts/

Тестирование веб-компонентов в Light DOM проще, чем кажется. Херардо Родригес рассказывает, как связка Vitest, Lit, DOM Testing Library, vitest-axe, и продуманная архитектура Light DOM упростили проверку событий, форм, фокуса, и доступности в крупном легаси-проекте. #js #webcomponents #testing

https://cloudfour.com/thinks/testing-html-light-dom-web-components-easier-than-expected/

Мониторинг производительности веб-компонентов. Кассондра Робертс объясняет, как User Timing API позволяет замерять этапы жизненного цикла, вычислять время апгрейда и понимать поведение компонентов на реальных устройствах. Подход с базовыми классами, миксины, аналитика и самые важные метрики, влияющих на пользователей. #performance #webcomponents

https://allons-y.llc/posts/2025-11-23/

Готовый к продакшену стартовый шаблон для веб-компонентов. Аарон Густафсон собрал репозиторий с мастером настройки, вариантами импорта и регистрации, тестами на Vitest и Happy DOM, ESLint и Prettier, CI в GitHub Actions, а также с безопасной публикацией в npm и заметками по лучшим практикам для кастомных элементов. #webcomponents #js #tools

https://www.aaron-gustafson.com/notebook/a-web-component-starter-template/

Как писать кастомные элементы с lit-html. Дэйв Саманьего объясняет, почему выбирает lit-html вместо полного Lit, включая размер, light DOM без shadow DOM и более простые импорты. Он показывает stateless обёртку <textarea> со статус-баром и stateful Покемон-карточки с сигналами, перемешиванием, Intersection Observer и навигацией с клавиатуры. #webcomponents #lit

https://frontendmasters.com/blog/custom-elements-with-lit-html/

Как динамически устанавливать кастомные элементы. Хейдон Пикеринг предлагает соглашение об именах, хелперы define() и скрипт install(), который ищет :not(:defined), убирает дубликаты и импортирует только реально используемые элементы. Для зависимых компонентов есть событие ready, а для добавлений после загрузки подходит MutationObserver. #js #webcomponents

https://heydonworks.com/article/dynamically-loading-custom-elements/

Reference Target: и волки сыты, и инкапсуляция цела. Элис Боксхолл представляет новое предложение, которое позволяет элементам в shadow DOM становиться целями, когда ссылаются на хоста, при этом сохраняя инкапсуляцию. В спецификациях есть пул-реквесты, а в браузерах реализации: в Chromium самая полная за флагом, а в WebKit и Firefox ранние прототипы. #webcomponents #a11y

https://blogs.igalia.com/alice/reference-target-having-your-encapsulation-and-eating-it-too/

Кастомные элементы с поддержкой форм на практике. Роб Левин делится опытом добавления поддержки Form-Associated Custom Element в библиотеку AgnosticUI с помощью ElementInternals API. Статья описывает две стратегии валидации: делегирование нативным элементам формы и реализацию валидации напрямую, с пошаговыми примерами для input, radio и combobox, включая проблемы изоляции Shadow DOM. #webcomponents #html

https://frontendmasters.com/blog/form-associated-custom-elements-in-practice/

Под капотом нового фронтенда MDN. Лео Макардл рассказывает, как команда MDN заменила устаревшее React SPA на современную архитектуру с веб-компонентами и Lit. Новая система использует серверные компоненты для статической шаблонизации, лениво загружает интерактивные элементы как кастомные элементы и опирается на Baseline при выборе API. Результат: среда разработки стартует за 2 секунды вместо 2 минут. #mdn #webcomponents

https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/

Прогрессивные веб-компоненты. Ариэль Салминен представляет Elena — опенсорсную библиотеку для создания веб-компонентов, которые сначала работают на HTML и CSS, а затем гидратируются с помощью JavaScript. Elena решает распространённые проблемы: сдвиги раскладки, проблемы доступности и слабую поддержку серверного рендеринга. Библиотека весит всего 2,6 КБ и включает более 1000 тестов со 100% покрытием кода. #webcomponents #js

https://arielsalminen.com/2026/progressive-web-components/

Поддержка современных CSS-фич в shadow DOM. Adobe Spectrum Web Engineering отслеживает поддержку CSS-фич внутри shadow DOM и при пересечении его границ. Проект охватывает :has(), @property, @scope, anchor positioning, каскадные слои, выражения от контейнера и нативную вложенность, документируя функциональный статус, кросс-контекстное поведение и баги браузеров. Для каждой фичи есть результаты Web Platform Tests и ссылки на спецификации. #css #webcomponents

https://shadow-dom-css.adobe.com/

Introducing masonry-gridlanes-wc — нативный веб-компонент для masonry раскладки. Скалк Нитлинг создал веб-компонент для masonry-раскладки в соответствии с display: grid-lanes из спецификации CSS Grid Level 3. В браузерах с нативной поддержкой grid lanes компонент полностью уступает место браузеру. В остальных случаях используется JavaScript-фолбек для раскладки по колонкам и строкам с настраиваемыми отступами и шириной колонок. #webcomponents #layout

https://schalkneethling.com/posts/introducing-masonry-gridlanes-wc-a-native-first-masonry-web-component/