Framework-agnostic Select and Toast components built with Web Components

Hi HN,

I’ve been working across multiple frontend stacks over the past few years (React, Vue, Angular, etc.), and one recurring frustration kept coming up:

Core UI components like selects and toast notifications get rewritten every time the framework changes.

Even when the behavior and UX are essentially the same, the implementation is tightly coupled to the framework, which makes long-lived UI logic surprisingly fragile.

So I decided to experiment with a different approach: building UI primitives as native Web Components, then optionally wrapping them for frameworks instead of re-implementing them.

As a result, I built two components:

SeoSelect — a production-oriented Select component

Virtual scrolling for large datasets

Multilingual fuzzy search (including Korean, Japanese, and Chinese input patterns)

Keyboard and screen reader accessibility by default

Zero runtime dependencies

SeoToast — a lightweight, framework-agnostic Toast notification component

Multiple positions and animations

Duplicate message grouping

SSR-safe behavior

~10KB gzipped

Both components are implemented as pure Web Components first, with framework wrappers added only where it improves developer experience.

I’m not trying to replace frameworks — this was more about testing whether UI primitives can live outside framework lifecycles while still being practical for real-world applications.

I’d really appreciate feedback from people who have:

Used Web Components in production

Built design systems shared across frameworks

Run into limitations or sharp edges with this approach

Links:

https://www.npmjs.com/package/seo-select

https://www.npmjs.com/package/seo-toast

Happy to answer questions or discuss trade-offs.

Thanks!