Framework-agnostic components across React, Vue, Angular

WHAT THIS TESTS This probes architectural judgment for serving many frameworks without rewriting components three times.

A GOOD ANSWER COVERS Lay out the three strategies with trade-offs. Web components offer a single, standards-based implementation that runs anywhere, but they have friction: passing complex props and handling events across framework boundaries is awkward, typing and form integration need extra work, and server-side rendering with the shadow DOM is harder. Framework-specific wrappers, hand-written per framework over a shared core, give the best ergonomics and types but multiply maintenance across React, Vue, and Angular. Code generation produces idiomatic native components per framework from one source of truth, balancing reuse and ergonomics, but adds significant build and tooling complexity and can leak abstractions. A pragmatic answer is often a hybrid: implement core logic and styling once, perhaps as web components or a headless core, then ship thin generated or hand-written wrappers per framework for ergonomics and types. Whatever you choose, share tokens and styling across all outputs and version them together.

COMMON WRONG ANSWERS Declaring one approach universally best. Ignoring SSR, typing, and event-handling pain with web components. Underestimating the maintenance of per-framework wrappers. Treating codegen as free.

LIKELY FOLLOW-UPS How do web components handle SSR and forms? How do you keep wrappers in sync with the core? Where do tokens live in a multi-output build?

ONE CONCRETE EXAMPLE You build the core as web components for shared behavior and styling, then generate thin React, Vue, and Angular wrappers that map native props and events to the custom element and add proper types. All three consume the same token build, so a brand color change ships once and reaches every framework.