TL;DR web components are a great way to create cross-framework components. However due to some of the dynamics of the shadow DOM and a silence from the official spec on the issue, web components don’t work well out of the box. There are a few existing workarounds:
- The iron-form approach
- Extending built-in elements
Both of these approaches have some serious drawbacks, one of them being that neither of these approaches work in conjunction with the shadow DOM. I’d like to propose a third alternative that bypasses these issue using slots.
Start with a basic form component built with stenciljs. Demonstrate basic usage with live snippet. Then demonstrate how it fails to work with traditional form submit.
Demonstrate how it works using slots.
How to sync the slot input value to your component’s state (simulates “pure” component). Hypothesis: using a combination of MutationObserver (to track attribute changes), Proxies (to track prop changes), you can keep your component’s value state in sync with the input/inputs.
Talk about benefits of this approach. Integration with VueJS’s v-model and/or some react library. Component focuses on presentation, not state management. Ability to slot multiple inputs into a single form element (think date range).