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

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

Progressive Web Components

Elena는 Progressive Web Components라는 디자인 철학을 구현한 경량(2.6kB) 오픈소스 라이브러리로, HTML과 CSS를 우선 렌더링하고 이후 JavaScript로 점진적 상호작용을 추가한다. 이 접근법은 서버 사이드 렌더링(SSR) 호환성과 접근성 문제, 레이아웃 이동 문제를 해결하며, React Server Components 같은 프레임워크와도 호환된다. Elena는 크로스 프레임워크 호환성, 상태 관리, 이벤트 위임 등을 지원해 웹 컴포넌트 개발의 복잡성을 줄여준다. 현재 v1.0.0-rc.7 릴리즈 후보가 공개되어 디자인 시스템 구축에 관심 있는 팀에 적합하다.

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

#webcomponents #progressiveenhancement #ssr #designsystems #javascript

"""
Hey yo! The tutorial is too long. It needs a table of contents or something
"""
--- someone asking for help, unaware that Wanderland's Emacs integration yas snippets for all the web components you might want to drop in to your whatever you're writing

"""
Hey yo! Why are the boundaries labelled 1, 3 & 5?
"""
--- that guy again, unaware of the joys of loosing pigs 1 & 3 on an unsuspecting high school

#emacs #orgmode #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