Introduction to Building Custom Web Components

This video explains the fundamentals of creating custom Web Components for your web sites. Topics covered are:
classes that extend HTMLElement;
customElements.define method;
templates and slots;
shadowRoots and why we need them.
Github Repo with code from video: github.com/pro...
Using HTML5 Templates - • Using HTML5 Templates
cloneNodes and creating HTML Templates - • cloneNode Method and C...

[@heshanwijerathna]

Your channel is a gold mine. And some day this channel will become every ones favorite. I learned lot from you.

[@mohamedelkhalil1288]

Great video! I gotta ask, how can I build js headless packages?

[@SteveGriffith-Prof3ssorSt3v3]

The only tutorial I have on anything headless is this one - kzbin.info/www/bejne/pHqth2CCl7uSrK8

[@ranathedev]

Thanks a bunch, sir! Your explanation is just amazing. This is the first video I've watched of yours and already subscribed to complete all of the series you've made free for us to learn. Thank you for your efforts! 🙏

[@jeanmarcpourchel307]

i agree with Heshan wijerathna!.....biggest gold mine ever!!! Very good idea, very good explanations! it's very usefull before learning frameworks such as angular ( even though it's typescript) or vuejs! And as always....thanks for teaching and sharing!!!

[@SteveGriffith-Prof3ssorSt3v3]

Styling with web components is coming on Tuesday

[@Aquilesxd]

Amazing video! My coleague and I has been studying this subject, and you are the only one who got that deep into it! Just one question: is there any way to document our web components so that the IDE can help whoever is using them?

[@SteveGriffith-Prof3ssorSt3v3]

@@Aquilesxd a great way to do this is to make them into a public repo on github and add the Readme.md file at the root where you provide all the information. Also include demo code or an example webpage using the component

[@Aquilesxd]

@@SteveGriffith-Prof3ssorSt3v3 I see, thanks a lot! Again, amazing work man, keep it up!

[@AniishAu]

Bah! I thought you could only do that in React!

[@fernandoarnaldovilanculo8286]

Thank you sir! Keep it up!

[@emirmasinovic]

Is using innnerHTML safe in this case? If yes, then what would be the point of using a framework? What would other strong points for it be?

[@SteveGriffith-Prof3ssorSt3v3]

innerHTML is only ever safe if the values that you are putting into it are completely controlled by the developer and not using user provided content.

[@Bengadeer]

I've built the various web components in this series and they worked great...in VS Code. Why don't they work when I open the index.html in a native browser? The CSS and active JS don't seem to wake up.

[@SteveGriffith-Prof3ssorSt3v3]

Are you importing the module for the component?

[@Bengadeer]

@@SteveGriffith-Prof3ssorSt3v3 I figured it out. First: yep module called. The issue is Chome called me out on a CORS violation for this code loading directly to the browser.

[@ROSSNKUNGA]

Steve you are a gift, i am so lucky to have you as my JS professor in my school program and program coordinator, you are so dedicated, 🔶, I understand this concept in a simple way wow! Be blessed Steve i love you and what you do for us and the rest of the world 🙌🦾

[@Anonymouzee]

good info... ?where is the link for the video on templates?

[@SteveGriffith-Prof3ssorSt3v3]

At the bottom of the description in the recommended videos.

[@OK-qy3ir]

Great video! A question about the web components. How does the search engine read the web components, it is a shadow-root ... Is the rendered content indexed? How does the search engine handle it? Thanks a lot Steve!

[@fahdfuhaid573]

Thanks ... very helpful series. i hope we see multi components put together to make a web app.

[@cristian702]

LOVE IT!

[@chhavimanichoubey9437]

this was absolutely weird concept for me.

[@SteveGriffith-Prof3ssorSt3v3]

It is become a more common practice with large companies so they can standardize building their sites. There are many libraries of components available too.

[@chhavimanichoubey9437]

@@SteveGriffith-Prof3ssorSt3v3 thanks for the head's up.

[@zerqs]

I was searching your channel for a guide last night for web components , wow :D

[@sinamobasheri]

Beautiful Beautiful ❤ Thanks Steve

[@ssikarim]

Thanks Steve, Is it a good practice to build html elements in js with template literals ?

[@SteveGriffith-Prof3ssorSt3v3]

If you are building web components yes. Much easier that creating elements and slots individually through the script and appending them to the shadow root

[@abulabbas1581]

Hi thanks for this knowledge great learning .. Where can i get the whole documentation about this web components ? Kindly share the link if possible Thanks

[@SteveGriffith-Prof3ssorSt3v3]

Here is my full playlist for Web Components - kzbin.info/www/bejne/oGHUeGCXm6llapY The mozilla developer network site has lots of notes about web components. So does the google web.dev site. www.w3.org/TR/components-intro/ - is the official spec for web components.

[@tomatescript]

Thanks for the video Steve, your explanation is really good and direct to the point!

[@aileenchan3741]

Wow, what a great video! Thank you for making this video and so happy I found it! Is this the same approach React is doing when creating components? Like when in React we pass {children} to a parent component, but in Vanilla JS it is with ? I feel like I don't know Vanilla JS well enough, wow!!! Excellent video!

[@SteveGriffith-Prof3ssorSt3v3]

There are similar concepts but they are not built the same way in React.

[@jezza10181]

Nice explanation

[@RajibAhmad]

Thanks a lot Steve for all those priceless tutorials.... simply amazing

[@johnm8358]

when should i use web components over React/Vue components?

[@SteveGriffith-Prof3ssorSt3v3]

They are two separate things. With the frameworks you are building components that work within the one site that you are currently building with that specific framework. Web Components are something that you can build and then reuse on any site that you want with or without a framework.

[@sovereignlivingsoul]

excellent video, nice explanations, I have just started looking into web components and this was an excellent resource, look forward to your other videos.

[@SteveGriffith-Prof3ssorSt3v3]

More coming soon

[@komkwam]

Wasn't this what xhtml was all about, to make your own tags?

[@SteveGriffith-Prof3ssorSt3v3]

No. Xhtml was applying the xml rules to html.

[@D7460N]

Thank you for this video. Very straightforward. Look forward to watching your other videos. Is shadowdom required for native web components? Also, is JavaScript registration of the custom HTML tag required to display content? Or is JavaScript registration necessary to display dynamic content? Thanks again!

[@SteveGriffith-Prof3ssorSt3v3]

shadowdom is how custom elements are added to the dom to create a "safe space" for them to have contained CSS that doesn't impact the rest of the page. To use a custom element you do need to register it. If you don't then the browser will treat your like a span with no CSS or behaviour.

[@D7460N]

@SteveGriffith-Prof3ssorSt3v3 Thank you for the reply. Apologies for my ignorance, but in light of keeping things simple if possible, isn't it easier to simply target the custom HTML tag for styling rather than taking on additional complexity with shadowdom? What am I missing?

[@SteveGriffith-Prof3ssorSt3v3]

@@D7460N The ShadowDOM is automatically there around any custom element. The purpose of the shadowDOM is to isolate and protect the page from the element and the element from the page. We don't want styles from one transferring to the other and impacting the appearance of other things. There are a few basic styles that cascade down from the page to the HTML inside the custom element but not many. You wouldn't want to define a component with wild colours and have that leak out on to every website that uses the component.

[@ahmedsalahabdullah2317]

thank you

[@whitehat4u]

excellent!, add about ShadowCSS and it's perfect ;)

[@SteveGriffith-Prof3ssorSt3v3]

That's part of the playlist. There are 4 videos

[@whitehat4u]

@@SteveGriffith-Prof3ssorSt3v3 do you Do you have about Jest or Enzyme?

[@SteveGriffith-Prof3ssorSt3v3]

@@whitehat4u not yet

[@hericklenin]

Great material, thank you for this. Why main.js is the parent of the bigbang.js?

[@SteveGriffith-Prof3ssorSt3v3]

It's not. main.js is there just to prove the point that you do NOT need to import bigbang.js It just needs to be loaded and run. the customElements.define() command is the part that does all the work.

[@hericklenin]

@@SteveGriffith-Prof3ssorSt3v3 Awesome! Thank you.

[@derekfarealz]

steve you are the gem of js. never stop!

[@mohammedabdulaziz3658]

Nice

[@RemzM]

Such a great explanation as always, thank you Steve. I still hope and believe we will see your big Vue course in the future 🙂

[@igorr4682]

or Angular LOL

[@amankumarraj5090]

Hey Steve Sir. I am going through your video tutorials. They are really wall made, appreciate it. I have a question which would like you to address. I am willing to create an html page using Javascript function which will be stored in the Website's database and has a link address to access the created page. The Javascript function will be linked to a button which when clicked, a page is created. Do answer this query of mine.

[@SteveGriffith-Prof3ssorSt3v3]

What website database are you talking about? The .hosts file? IndexedDB? Cache API? Web SQL? something else? Really not sure what you are asking. Not something I can really answer in a comment though.

[@amankumarraj5090]

@@SteveGriffith-Prof3ssorSt3v3 I am referring to any database which can store the newly created html pages in it. The functionality i am talking about is that => A button will be provided in a website and whenever the button is clicked by a user, it will automatically generate a new page with the extension .html which will be stored in the website's server or database and has a website link to access it thereafter.

[@SteveGriffith-Prof3ssorSt3v3]

@@amankumarraj5090 so basically you are asking how to build a content management system. Not something anyone could answer in a comment

[@amankumarraj5090]

@@SteveGriffith-Prof3ssorSt3v3 Where will I get the solution for this Sir? Would be great if you can make up a tutorial on it using Javascript. Earnestly looking forward to your approach on it.

[@bxlbjorn]

finally, a fantastic explanation!!!

[@SteveGriffith-Prof3ssorSt3v3]

And more coming soon

[@arunkaiser]

Please change the thumbnail design it is not much attractive