How to create a Web Component using Vanilla JS

In this video we look at creating a Web Component without the help of any framework or libraries! this allows us to dig into the deeper details of Web Components including the lifecycle events, ShadowDOM and the many issues that a library or framework abstracts away for us. Problems dealing with events and rendering become immediately apparent when looking to roll our own solution rather than using something like LitElement, Stencil, svelte, react, vue, angular or any other framework that provides an abstraction layer on top of creating a Web Component.
We look at the issues in using innerHTML to setup the UserInterface and also how tricky it is to sync the attributes and properties between the component class and the tag element on the html page.

0:00 Intro
1:26 Create Shadow DOM
2:18 Component HTML
3:55 Render using Connected Callback Life Cycle event
4:50 Define CustomElement and name it
5:30 Show Web Component on Simple Web Page
6:45 Configure properties/attributes using ObservedAttributes callback
7:45 Sync attributes/properties using AttributeChanged callback
8:30 Refresh component on property change
9:25 Define golden source as for property/attribute value
11:00 Update property programmatically
13:30 Handle Events within Component

P.S Just joined buy me a coffee :-)

[bmehder]

I've been viewing several web component crash courses lately, and I find this video to be the most clear and easy to understand. Thank you for doing this!

[yurr]

Great video.
Many people over-complicate very quickly, but this was concise quick and easy to understand!

[wheelbegood]

BIG CONGRATS - that was a very informative and interesting video!!
I just begin to learn JS and it makes me even more want to learn it from the ground up!

[leandrew]

I've been looking for the definition of Shadow Root DOM and examples to use it. But this video is one of the most clear and easy to understand. Thank you for doing this!

[jptech__]

Good job! A very precise and concise explanation, you rock!

[samuelhuang]

You have been a real life saver!! Thank you so much. Subscribed!

[gideon]

Oh man, this has been really useful. Thank you for sharing!

[maksimsergeevich]

Great! You have reinvented the ... framework/library.

[paulohsgoes]

Oh, man! You're the best! You've just gotten a new subscriber.

[mvg]

This is really awesome thank you so much!

[theoligarchist]

good pace, good voice, good accent, and most importantly Great font size,
👍

[EricRohlfs]

Nice video, very succinct into to the topic. I especially liked using getters and setters for working with attributes. The one one assertion you make that I would challenge is performance. We have found that our custom elements are much faster than our previous vue.js and react implementations. I 100% agree they are more verbose and as a team there are more decisions to be made such as unbundled or bundled.

[codelightsparkles]

amazing video and really easy to follow, I am surprised you don't have more subscribers

[BaruchoSan]

This true teacher is a five star.
Congratullations.

[dangerousInfo]

Thanks I was lucky to run into this (it's rare to see things like this.-it's always about framework marketing that put people on the shoulders of giants and make them move from ground up again, when the giant falls). For the eventListner, maybe creating another function and calling it inside this.render, just after inserting the html would have been better. What you've just explained seem to be the core concept behind these frameworks.

[realraven]

this may come in handy. i am converting a legacy Add-on (FiltaQuilla) for Thunderbird 78 and need to remove remaining xbl bindings - it ain't easy. Add-ons usually don't use frameworks so i need to keep it pure JS (unless Mozilla has a framework) moving away from XUL to HTML is hard as we loose a lot of good functionality that needs to be reimplemented.

[sazaraki]

Excellent info to get a foundation. I understand how they work inside, now I just need a how to use them outside 😁

[aram]

Thumb up. Although the missing part here is disconnectedCallback and removeEventListener :)

[sau]

Nice video. at 3:25 you are writing the body of the render method. The <h1>Counter</h1> is not encapsulated in double quotes. Why is that?

[livb]

Thanks for the video. I got a question if you don't mind.

13:37 Why is it that when it's inner HTML you can't add event handler directly on the html?