DEV Community

Cover image for Web Components — the right way.

Web Components — the right way.

Mattia Astorino on March 18, 2018

From about two years we have been heard about web components, well this article will not explain how they work (for that there is Google), but rath...
Collapse
 
jamescoyle profile image
James Coyle

You make some good points in an ideal world but webcomponents are still missing a key feature that would allow for progressive enhancement. We still can't extend any element other than a standard HTML element which is why we still wrap or replace the stock elements.

Ideally, if you wanted to create a custom select element, you would extend the stock select element to gain it's functionality and then define your own UI. Then, if the user was on a browser that didn't support webcomponents or had JS disabled they would be shown the stock select instead.

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

They are discussing about how to extend native html elements (Please check the google fundamental link). There is already a living standard spec to extend html elements that is now under reconsideration to improve it. Nothing definitive, but since we are talking about a new technology.. it's acceptable.

About nojs browsers, no PWA will work if you disable js...

Collapse
 
jamescoyle profile image
James Coyle

Wasn't the 'is' attribute supposed to allow for nojs progressive enhancement? That's what I was thinking of anyway.

Thread Thread
 
equinusocio profile image
Mattia Astorino • Edited
  1. A customized built-in element, which is defined with an extends option. These types of custom elements have a local name equal to the value passed in their extends option, and their defined name is used as the value of the is attribute, which therefore must be a valid custom element name.

But this spec is now under reconsideration:

#662 - 509

Collapse
 
wolframkriesing profile image
Home Officer • Edited

I actually like the Gold Standard (github.com/webcomponents/gold-stan...) it's kinda describing what you mean, isn't it?

Could you please explain what you mean by the <my-button> example? Isn't that the way to go due to the lack of customized built-ins? Thx in advance

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

Hi, gold standard is much more related to the technical development, this article talk about something more abstract. But yes, they aim to the same point. Telling to users how to use web components by the HTML approach.

If you can extend, check this section of the google fundamentals doc.
If you can't extend and you are making a custom button element (even if i don't see why you should do that), you should recreate it. Your <my-button> will become the button itself (using accessibility attributes), it should not wrap another <button>. This mean that you should recreate all the native button behaviours (or those you need) and add your new features. This does not mean that you can't put a button inside a shadow-root, just not inside a custom element that aim to replace the button itself.

Do you would put a <button> inside another <button> in the HTML? Why you should do that with custom elements?

Collapse
 
wolframkriesing profile image
Home Officer

Yep, customized built-ins would be ideal. We agree.

What do you think of how elix's AutsizeTextarea does it?

Recreating (as you describe) means building a new element with a (potentially) different behavior set, running the danger to not really behave like an extended element, wouldn't it?

Thread Thread
 
equinusocio profile image
Mattia Astorino • Edited

Recreating (as you describe) means building a new element with a (potentially) different behavior set, running the danger to not really behave like an extended element, wouldn't it?

Yes, until we can fully extend built-in elements each ”recreated" custom element should behave the same as the native one.. and that's why is hard to think, hard to do and generally a bad practice. I think it's really hard to find some built-in element that needs to be recreated... about elis'x autosize textarea, they added a funcionality but they can avoid using a <textarea> element and use a content-editable element (recreating the textarea behavior and so on...)

Collapse
 
webpadawan profile image
Serhii Kulykov

@equinusocio the canonical URL no longer works. Could you please update the blog post here?

Collapse
 
equinusocio profile image
Mattia Astorino

Done! Thank you

Collapse
 
davidbwaters profile image
David Waters
Collapse
 
equinusocio profile image
Mattia Astorino

Please read above comments.