#web-components — Public Fediverse posts

How to use wa-combobox with Vue

Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I used for the dropdown demos. It also obviously uses the same CodePen 2.0 style that we used previously.

As before, App.vue is the core of our application. There is a ComboBox.vue file that creates the ComboBox using the wa-combobox component. Feel free to fork the pen, experiment with the code, and see how easily you can adapt it for your own Vue projects. Happy coding!

Example: https://grand-block-gar.codepen.app

The 5 stages of enlightenment

https://status-indicator.webcomponent.io

#webdev #frontend #webcomponents #poetry

From React to Native Web With nanotags: A Migration That Saved 100 KB, by @travisturner.bsky.social (@evilmartians):

https://evilmartians.com/chronicles/from-react-to-native-web-with-nanotags-a-migration-that-saved-100kb

#migrating #react #webcomponents #libraries

Blog post: Custom Element Partials in BackflipHTML

https://olivierforget.net/blog/2026/custom-element-partials/

It's the first step towards Web Component support in Backflip. You can create and use partials based on custom elements, including using attribute values as data in the template. The goal is an HTML template system that you can use from anywhere that is a natural ally of modern HTML-first design.

#html #webcomponents

🚀 HAX 26.0.0 released for PHP / NodeJS / CLI
100s of #webcomponents via
NPM: https://www.npmjs.com/search?q=%40haxtheweb
haxcms-nodejs: https://www.npmjs.com/package/@haxtheweb/haxcms-nodejs
haxcms-php: https://github.com/haxtheweb/haxcms-php
cli: https://www.npmjs.com/package/@haxtheweb/create

This post originally appeared on The Fulcrum.

Welcome to this week’s The Programmer’s Fulcrum.

It’s your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism.

There is a lot of coverage of the shitshow that is ShitHub this week. And that makes me so happy I moved to Codeberg several […]

<status-indicator> web component

https://status-indicator.webcomponent.io

#webdev #frontend #webcomponents

From React to native web with nanotags: a migration that saved 100 KB. Pavel Grinchenko explains how they migrated an Astro marketing site from React and Ark UI to native Web Components, cutting JavaScript by 100 KB. Nanotags is a sub-2.5 KB wrapper that adds validated props, typed refs, and automatic cleanup, plus reusable accessibility attachments for ARIA patterns. With nanostores, it covers dropdowns, modals, and toggles. #webcomponents #react

https://evilmartians.com/chronicles/from-react-to-native-web-with-nanotags-a-migration-that-saved-100kb

От React к нативному вебу с nanotags: миграция, сэкономившая 100 Кб. Павел Гринченко рассказывает, как они перенесли маркетинговый сайт на Astro с React и Ark UI на нативные веб-компоненты, сократив JavaScript на 100 Кб. Nanotags — обёртка размером менее 2,5 Кб с валидацией пропсов, типизированными рефами и автоматической очисткой, а также подключаемыми ARIA-паттернами. В связке с nanostores этого хватает для меню, модалок и переключателей. #webcomponents #react

https://evilmartians.com/chronicles/from-react-to-native-web-with-nanotags-a-migration-that-saved-100kb

Evil Martians moved: From React to native web with nanotags: a migration that saved 100 KB. https://evilmartians.com/chronicles/from-react-to-native-web-with-nanotags-a-migration-that-saved-100kb #WebComponents #ReactSucks

Will Browar leaves Tailwind and Nuxt: Refactor: Kids Money. https://wbrowar.com/article/code/refactor-kids-money #WebComponents
Really great stuff.

Will Browar ditches Nuxt/Tailwind platforms in: Refactor: Kids Money. https://wbrowar.com/article/code/refactor-kids-money #WebComponents #NodeJS #ExpressJS
Really great stuff.

Good post on de-frameworking your frontend from Nuxt/Tailwind to #webcomponents by @wbrowar https://wbrowar.com/article/code/refactor-kids-money

Over the past couple of weeks I rewrote a personal money-tracking app I made for my kids in 2022. I replaced Nuxt and Tailwind with web components, ExpressJS, and modern CSS—mostly to see what it takes to do it.

https://wbrowar.com/article/code/refactor-kids-money

#WebComponents #CSS #WebDev #money

Constructable Stylesheets and “adoptedStyleSheets”: One Parse, Every Shadow Root, by @frontendmasters.com:

https://frontendmasters.com/blog/constructable-stylesheets-and-adoptedstylesheets-one-parse-every-shadow-root/

#webcomponents #lit #css #javascript #apis #shadowdom

#Development #Approaches
Two paradigms for enhancing HTML tags · Practical ways to empower HTML elements https://ilo.im/16cfik

_____
#HTML #Forms #WebComponents #APIs #WebDev #Frontend #DOM #JavaScript

Never Lose Form Progress Again, by @Aaron:

https://www.aaron-gustafson.com/notebook/never-lose-form-progress-again/

#forms #webcomponents #progressiveenhancement

This post originally appeared on The Fulcrum.

Welcome to this week’s The Programmer’s Fulcrum.

It’s your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of […]

So, Firefox 150 has added support for "Scoped CustomElementRegistry" (SCER for brevity) behind a flag (dom.scoped-custom-element-registries.enabled). I'm trying to figure out how this will solve the problem of micro-frontends bringing their own (i.e. different) version of a design system wc-library into a website. Are there any real world examples available yet? I mean deep dive blog posts or example repos that go beyond the Edge demo (of two confetti buttons 😉). I'm looking for answers to questions like
- does the SCER only apply to custom elements being added within its shadow DOM? no light DOM then?
- is it the React app's responsibility to create its own SCER, wrap itself into that shadow-dom and define its own version of custom elements being used?
- as DS UI lib author, how do I make that process the least painful or transparent at best from a DX point of view for our consumers

Maybe you can help out 🥹 @westbrook or @stuffbreaker or @sir_pepe

https://developer.chrome.com/blog/scoped-registries?hl=en

#webcomponents #designsystems

#Development #Guides
Never lose form progress again · A web component storing and restoring form values https://ilo.im/16cbuk

_____
#Forms #Storage #WebComponents #ProgressiveEnhancement #Browsers #WebDev #Frontend #DOM #HTML #JavaScript

Symbiote.js: суперспособности для веб-компонентов

Смысл создания и использования новых библиотек и фреймворков в том, чтобы решить задачи, которые не были решены ранее. Либо, в том, чтобы решить какую-либо задачу более эффективно, чем это уже было сделано кем-то. Сегодня мы начнем разговор о задачах, которые можно решать с помощью Symbiote.js , и делать это гораздо проще и элегантнее, чем с другими фреймворками.

https://habr.com/ru/articles/1025212/

#custom_elements #shadow_dom #symbiotejs #webcomponents #композиция #работа_с_данными

Introducing masonry-gridlanes-wc: a native-first masonry web component. @schalkneethling created a web component that provides masonry layouts aligned with display: grid-lanes from the CSS Grid Level 3 spec. In browsers that support native grid lanes, it steps aside entirely. Otherwise, it uses a JavaScript fallback for column and row masonry packing with configurable gaps and column widths. #webcomponents #layout

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

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/

#Development #Launches
Modern CSS feature support for shadow DOM · “Think ‘CanIUse’ but for CSS for web components.” https://ilo.im/16c6w2

_____
#WebComponents #ShadowDOM #Baseline #Browsers #WebDev #Frontend #DOM #HTML #JavaScript

The logical follow-up: <css-value-input syntax="<color># | whatever"> with constraint validation in ~60 lines!

https://codepen.io/editor/SirPepe/pen/019d9647-b896-7121-aa7f-df55ebd23946

#webcomponents #webdev

Under the Hood of MDN’s New Frontend, by @leo.mca.is (@mdn):

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

#mdn #react #webcomponents

Modern CSS feature support for shadow DOM. Adobe Spectrum Web Engineering tracks CSS feature support within and across the shadow DOM. The project covers :has(), @​property, @​scope, anchor positioning, cascade layers, container queries, and native nesting, documenting functional status, cross-boundary behavior, and browser bugs. Each feature includes Web Platform Tests results and links to spec issues. #css #webcomponents

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

Поддержка современных 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/