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...
For further actions, you may consider blocking this person and/or reporting abuse
๐ Thanks for reading! ๐
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?
Exactly right! document.registerElement is deprecated and shouldn't be used.
@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.
๐คฃ
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 ๐ฅ
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!
Thanks for the kind words ๐
Nice article! Using
template.innerHTMLare quite hacky and cannot make use of IDE or Editor's features. Is there any way (e.g. load html file) to replacetemplate.innerHTMLmethod in yoursuper-span.jsafter HTML-import are deprecated?I think you'd like to check out lit-element. I have a whole article on it in part 5 of this series.
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 :)
Thanks, TJ :D
This article has restored my faith in the Javascript ecosystem. Thank you Benny.
That's what we came here for :)
Glad you enjoyed it.
Excellent example you bring about web components. Awesome!
Thank you, Satya!
Please enjoy the other posts in the series.
Here's an example of implementing config driven UI elements using custom components.
medium.com/@paramsingh_66174/gener...
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.
Thank you! ๐
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.
Really great article. Thanks for taking the time to write this :)
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?
Hey Eric thanks for dropping by ๐ป
content is a read-only property on
HTMLTemplateElementthat'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.