Easily Build a Progress Bar with Web Components in JavaScript

View the SOURCE CODE:

In today's video I'll show you how easy it is to build a web component (using custom elements) in JavaScript. This doesn't require any library or framework such as Vue, React or Angular - it's all done using pure JavaScript.

We explore the concept of shadow DOM, getters and setters, as well as passing through CSS styles using variables.

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript

[ban_droid]

This channel is the best resources for changing someone who hate vanilla javascript, to be a vanilla javascript simp

[angmarliche]

Concise, interesting and simple explanation with a simple example, that can help beginners understand Web Components and build their own components. Thanks Dom!

[chhavimanichoubey]

for some reasons, your explanation worked for me compared to other YouTubers, not to mention I have intermediate javascript experience to help me understand this.

[TheBorninmotion]

web components are very underrated, please make more tuts with wcs, we dont need frameworks at all.

[leonvanrijswijk]

This is awesome. Very well explained. Thanks.

[danieltriana]

Nice video, I was doing a 3 hour course on this, but your just explain it with a fun project in just 20 min, thanks.

[sateeshmodukuru]

I always wondered, did you get into web dev because your name is "DOM"? Big fan of your content.

[Shawn-Mosher]

Web components are the future in my opinion

[hassaneoutouaya]

THANK YOU SO MUCH !
I think that it will be great idea if you build a mini-project using native JavaScript web components in the coming days. And share it with us.

[cloudpuncher]

Hey mate, great video like always...

Maybe for your next WC video you could highlight that shadow DOM isn't necessary for custom-elements. Sometimes I just use custom-elements just to trigger template renders on proceeding templates on connectedCallback() (connected callback triggers before childNodes of the custom-element is parsed)

Also everybody seems to be using innerHTML to "hydrate" custom-elements yet there are quite a few alternatives like using a template inside the custom-element then cloning and filling with textContent. You can even use a recursive (or generator yield*) function to createElement + Object. assign properties incl textContent for JSON trees.

Another interesting topic is using CSS custom-element::part(x) for styling inside Shadow Dom.

One of the huge pros of custom-elements is readability to developers and combined with aria roles is substantially better than <div> soup...

[randomtimessomehow]

Why did you not extend the native progress element class, like so: class CustomProgress extends HTMLProgressElement { ... }

[svetoslavtrifonov]

Glad that you finally made a video about web components. I hope there will be a follow up videos with more complicated, real case scenarios. Something like Component list with some custom component children. That aside I am using a getter that is returning js template with some "private" props (return `<link href="/some.css" rel="stylesheet" type="text/css"> and i am getting a bit of delay when everything is styled. component is connected without styles and then it is ok after some ms. Is there a way to preload the css or i always have to use <style> tag? Thanks for the video