Émile, have you gotten a change to checkout web.dev/more-capable-form-controls/, it's a pretty well agreed to spec with in-progress (except maybe in Safari, as with too many things 😞) development or shipped implementation in various browsers. It's a great way to ensure that custom elements are properly associated with the forms in which they live. @calebwilliams12 also has a great write up on this for CSS Tricks where he introduces a polyfill for smoothing those browsers that have yet to fully catch up: npmjs.com/package/element-internal... I think it'll do great things for form processing, and the underlying Element Internals API is opening up a lot of other cool possibilities in accessibility as well, so it's worth a follow. Cheers!
Web developer and lover of all things.
Helping developers and agencies build better websites.
Author of a short 60-ish page book about self-doubt and self-improvement.
Wow, thanks for your comment, I wasn't aware of this spec!
Although it's quite as "simple" as allowing the extension of built-in form elements, it looks like it's the next best thing! Plus, this allows for way more customization for components that do not extend/represent built-in form elements.
I'll definitely give this a shot and keep track of the browser adoption.
Agreed about extensions of built-ins, it would be really nice if Safari would just get over that and ship it, but it's better to move on than to fume on it too much at our level, even if there's a relatively small polyfill for them: github.com/ungap/custom-elements-b.... We should look at trying to get it separated/removed from the web components spec so that it's easier to do so, IMO. Then, we can focus on more agreeable/likely to ship x-browser specs like Element Internals.
Once you've had some time with Form Associated Custom Elements, I hope you'll share updated thoughts on the path forward with web components so we all can check them out!
Web developer and lover of all things.
Helping developers and agencies build better websites.
Author of a short 60-ish page book about self-doubt and self-improvement.
I will experiment with the Form Associated Custom Elements in the next few days/weeks, and I'll update this article or make a new one about my thoughts and experience if it's worthwhile!
Web developer and lover of all things.
Helping developers and agencies build better websites.
Author of a short 60-ish page book about self-doubt and self-improvement.
@westbrook
, you really helped big time with these comments today.
I just toyed around for 10-15 mins while reading the CSS-Tricks article you mentioned, and that was enough time to successfully turn my globally-styled inputs into a working input web component.
I expect I have a ton more work ahead to ensure it's as accessible and fully-featured as a regular input, but it is great to have a working and supported(-ish) solution to this problem!
I'll definitely make another article about this once I get enough time in. 👍
While in theory the form-associated API is the right™ choice, its current support is limited (only Chrome). However it is not so hard, to support Submit, Reset interaction of CustomElements. You simply grab your closest()<form> (and of course piercing any ShadowDOM you might encounter) and then simply listen for Submit or Reset events and act accordingly:
reset your components to some initial state for a reset
add your hidden inputs mirroring your serialized data to the DOM of the aforementioned form either on submit or, simply synchronize them on every change
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Émile, have you gotten a change to checkout web.dev/more-capable-form-controls/, it's a pretty well agreed to spec with in-progress (except maybe in Safari, as with too many things 😞) development or shipped implementation in various browsers. It's a great way to ensure that custom elements are properly associated with the forms in which they live. @calebwilliams12 also has a great write up on this for CSS Tricks where he introduces a polyfill for smoothing those browsers that have yet to fully catch up: npmjs.com/package/element-internal... I think it'll do great things for form processing, and the underlying Element Internals API is opening up a lot of other cool possibilities in accessibility as well, so it's worth a follow. Cheers!
Wow, thanks for your comment, I wasn't aware of this spec!
Although it's quite as "simple" as allowing the extension of built-in form elements, it looks like it's the next best thing! Plus, this allows for way more customization for components that do not extend/represent built-in form elements.
I'll definitely give this a shot and keep track of the browser adoption.
Thanks again! :)
Agreed about extensions of built-ins, it would be really nice if Safari would just get over that and ship it, but it's better to move on than to fume on it too much at our level, even if there's a relatively small polyfill for them: github.com/ungap/custom-elements-b.... We should look at trying to get it separated/removed from the web components spec so that it's easier to do so, IMO. Then, we can focus on more agreeable/likely to ship x-browser specs like Element Internals.
Once you've had some time with Form Associated Custom Elements, I hope you'll share updated thoughts on the path forward with web components so we all can check them out!
Agreed!
I will experiment with the Form Associated Custom Elements in the next few days/weeks, and I'll update this article or make a new one about my thoughts and experience if it's worthwhile!
Thanks again for all this great information 🙌
@westbrook , you really helped big time with these comments today.
I just toyed around for 10-15 mins while reading the CSS-Tricks article you mentioned, and that was enough time to successfully turn my globally-styled inputs into a working input web component.
I expect I have a ton more work ahead to ensure it's as accessible and fully-featured as a regular input, but it is great to have a working and supported(-ish) solution to this problem!
I'll definitely make another article about this once I get enough time in. 👍
While in theory the form-associated API is the right™ choice, its current support is limited (only Chrome). However it is not so hard, to support Submit, Reset interaction of CustomElements. You simply grab your
closest()<form>(and of course piercing any ShadowDOM you might encounter) and then simply listen for Submit or Reset events and act accordingly: