DEV Community

loading...

Discussion on: Web components in 2021: the Good, the Bad and the Ugly

Collapse
westbrook profile image
Westbrook Johnson • Edited

É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!

Collapse
emileperron profile image
Émile Perron Author

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! :)

Collapse
westbrook profile image
Westbrook Johnson

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!

Thread Thread
emileperron profile image
Émile Perron Author

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 🙌

Thread Thread
emileperron profile image
Émile Perron Author

@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. 👍