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;
- templates and slots;
- shadowRoots and why we need them.

[heshanwijerathna]

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

[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 🙌🦾

[jeanmarcpourchel]

i agree with Heshan 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!!!

[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! 🙏

[zerqs]

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

[derekfarealz]

steve you are the gem of js. never stop!

[RajibAhmad]

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

[tomatescript]

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

[fahdfuhaid]

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

[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.

[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 🙂

[rickard]

You are a saint man. This helped a lot!!!

[mohamedelkhalil]

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

[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?

[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?

[Anonymouzee]

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

[ssikarim]

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

[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.

[DN]

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!

[OK-qyir]

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!