Easily Build a Progress Bar with Web Components in JavaScript

View the SOURCE CODE:
codepen.io/dcode-software/pen...
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.
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
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-prem-001]

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

[@dcode-software]

✅✅✅

[@Alex-bc3xe]

I love the fact that you focus yourself on Javascript and not on any framework, cause like I always said, people need to learn how to walk very good in order to run. Everybody wants to start right away with frameworks but I learned more when I got back to the power of just Javascript to understand exactly what frameworks solve.

[@angmarliche9187]

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

[@TheBorninmotion]

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

[@nChauhan91]

They are awesome, we are working on a project totally based on WCs (no framework) with LIT element. Makes a lot of things easier when working with WCs

[@WhyAreThereHandlesNow87]

Vanilla JS Framework ~~~

[@chhavimanichoubey9437]

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

[@kunited9]

I finally understand who DOM is

[@leonvanrijswijk8409]

This is awesome. Very well explained. Thanks.

[@sateeshbharti]

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

[@maskman4821]

This is an awesome tutorial 👍

[@danieltriana1937]

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.

[@svetoslavtrifonov6431]

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 ` ${this.#data.myText}`) 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 tag? Thanks for the video

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

[@Shawn-Mosher]

Web components are the future in my opinion

[@cloudpuncher4615]

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

[@dcode-software]

Hey, thanks for the feedback 😁

[@randomtimessomehow]

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

[@lev_bul]

ERROR NO AWESOME!!!!!!!!!!!!!

[@lev_bul]

ERROR: undefined

[@leofun01]

In HTML is valid tag, not .

[@venerated]

This video is about custom HTML components, which can be named anything as long as it's kabab case.

[@lev_bul]

BAN