Pellentesque nec neque ex. Aliquam at quam vitae lacus convallis pulvinar. Mauris vitae ullamcorper lacus. Cras nisi dui, faucibus non dolor quis, volutpat euismod massa. Donec et pulvinar erat.
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?
Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
Pellentesque nec neque ex. Aliquam at quam vitae lacus convallis pulvinar. Mauris vitae ullamcorper lacus. Cras nisi dui, faucibus non dolor quis, volutpat euismod massa. Donec et pulvinar erat.
@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.
Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
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.
Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
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?
Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
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.
Coding is as much a matter of personal growth as it is of logic and control-flow. I keep patience, curiosity, & exuberance in the same toolbox as vim and git.
*Opinions posted are my own*
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.
We're a place where coders share, stay up-to-date and grow their careers.
😀 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.