DEV Community

Cover image for Lets Build Web Components! Part 1: The Standards

Lets Build Web Components! Part 1: The Standards

Benny Powers 🇮🇱🇨🇦 on September 18, 2018

Component-based UI is all the rage these days. In fact it's so established that people have even started retconning old-school jQuery widgets as "j...
Collapse
 
jochemstoel profile image
Jochem Stoel

😀 Thanks for reading! 😁

Thanks for writing. Interesting read and very well written. Looking forward to read part two.

I notice that you too use customElements.define and not document.registerElement. I have been wondering if registerElement is (to be) deprecated but never found a satisfying unopioniated answer.
Do you have any insight?

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Exactly right! document.registerElement is deprecated and shouldn't be used.

Collapse
 
jochemstoel profile image
Jochem Stoel

@bennypowers I would like to show you document.defineElement/nativeEleme..., a polyfill for custom elements that does not require a hyphen (-) in the HTML tag. It has been a while now since I created that repository but today I added the nativeElements.define() method because you confirmed that registerElement is deprecated in 2018.

Obviously I am aware that this is generally a bad idea to be doing but perhaps you appreciate it nonetheless.

Thread Thread
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦
Bad ideas completely overwrite the element and break things make iframes or script tags stop working

🤣

Collapse
 
lasalefamine profile image
Alessio Occhipinti • Edited

One of the best article on Web Components both for content and clarity. Really great work @bennypowers !

And looking forward for the 2nd part, of course 🔥

Collapse
 
gabuardi profile image
Josué Gabuardi • Edited

Awesome!
totally awesome.. man, I think that this serie of articles are GOLD.

I have researching for web component and web component libraries, I first read the 3 first articles then I start do research in other sites.. after a time... the researching brought me here again. What I mean is that your articles right now are a high quality resource for web components info since what the people usually know about it is almost anything so is difficult to found something like this.

Thanks very much to share!

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Thanks for the kind words 😁

Collapse
 
kawaiidora profile image
哆啦(Dora)

Nice article! Using template.innerHTML are quite hacky and cannot make use of IDE or Editor's features. Is there any way (e.g. load html file) to replace template.innerHTML method in your super-span.js after HTML-import are deprecated?

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

I think you'd like to check out lit-element. I have a whole article on it in part 5 of this series.

Collapse
 
kresnasatya profile image
Kresna Satya

Excellent example you bring about web components. Awesome!

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Thank you, Satya!
Please enjoy the other posts in the series.

Collapse
 
david_j_eddy profile image
David J Eddy

This article has restored my faith in the Javascript ecosystem. Thank you Benny.

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

That's what we came here for :)

Glad you enjoyed it.

Collapse
 
teej profile image
TJ Fogarty

Great post, and a great resource in general. I'll be referring to this a lot when I'm trying to learn more. Really looking forward to the next one :)

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Thanks, TJ :D

Collapse
 
stefant123 profile image
StefanT123

One of the best posts I've read. Very well explained. It will be a nice future reference. Can't wait for the next one.

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Thank you! 😁

Collapse
 
crapkit profile image
Patrick Nemenz • Edited

Thanks, Benny!

This post really opened my eyes on how far the standard has come since the old days of Polymer. Much like your write-up, the syntax is finally clear and concise.

Collapse
 
adityasridhar profile image
Aditya Sridhar

Really great article. Thanks for taking the time to write this :)

Collapse
 
paramsinghvc profile image
Parminder Singh

Here's an example of implementing config driven UI elements using custom components.
medium.com/@paramsingh_66174/gener...

Collapse
 
phnx311 profile image
Eric Chi

Hi Benny I've never seen the element method .content from const

clone = template.content.cloneNode(true);

Is this new or just something thats always been available?

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Hey Eric thanks for dropping by 🍻

content is a read-only property on HTMLTemplateElement that's not provided on other elements. It's purpose is to give you a handle on the template's contents as a DocumentFragment, so that you can clone it.