I've created a small protocol aimed at exposing reactive properties in Web Components that works across different frameworks. The basic idea is simple: components declare their bindable properties through static metadata and emit CustomEvents when these properties change. This allows adapters for frameworks like React, Vue, and Svelte to discover and bind to these properties automatically. I'm intentionally keeping this minimal, so it doesn't cover two-way binding, server-side rendering, or forms. I'm looking for feedback on a few points: Is the design reasonable? Is using static metadata with CustomEvents the right approach? Are there downsides or edge cases I should be aware of? Is this method actually better than using framework-specific wrappers? If there are existing patterns or better approaches, I'd appreciated being pointed in the right direction.
4 Answers
Have you looked into the Custom Elements Manifest (CEM)? It's a standard for describing custom elements and offers a way to generate manifests with a code generator. It simplifies creating bindings across frameworks, although your approach seems more straightforward since it avoids additional artifacts.
I'm curious about how you manage state during transitions between components. I often find that having explicit checkpoints helps minimize inconsistencies.
Great question! I've noticed that these checkpoints could indeed be beneficial for maintaining state. It's something I'm considering how to integrate effectively.
That's a solid approach you're taking! However, feedback might be limited since Web Components haven't gained as much popularity as expected. It would be helpful to see a couple of example use cases to get constructive input. For context, in my company, we create a lot of web components through StencilJS, which simplifies the process of developing core elements for various frameworks. While Angular handles web components natively, it lacks thorough documentation and strong typing, which I believe is what you're addressing. My question would be how your protocol stands apart from tools like Stencil, particularly regarding ease of use for developers creating and consuming these components.
You raise a valid point! I want to clarify that type safety isn't the main aim here. This protocol operates as a loose coupling method — components declare their bindable properties using static metadata, and any adapter can connect without needing to know the implementation details. Unlike Stencil, which requires using its toolchain and generates framework-specific bindings, my goal is for this protocol to serve as a shared convention, enabling interoperability of Web Components just by following this standard.
CEM is definitely a noteworthy reference, but it mandates distributing an extra manifest file alongside the component's class. In contrast, my protocol allows the metadata to be part of the class definition itself, meaning if you can import a custom element, all the information needed for an adapter comes with it. It eliminates the need for code generation or separate files, simplifying the distribution process.