Learn Web Components In 25 Minutes

Note that Safari does NOT support customized built-in elements (is="").

Great video - love web components (which actually already exists for like 10+ years) and their reusability. I believe that this is the future. I got tired of new / changing frameworks and you don't always need a JS framework.

Also for everyone who doesn't like to write HTML in JS, you can still wrap the HTML in your custom tag, like it is shown with the default slot. That way you can e.g. use your server side rendered translations or just put everything into a partial, to be able to reuse it.

Do you have video for advance concepts in web component

You just shouldnt use style and use inline style instead and this is basically a html element so it should be stylable by the outside

I'm implementing an Infinite scroll from scratch, without any JS frameworks, thought of using native apis just like web components. Thanks for this tutorial! I get it more now :)

Does this javascript have to be shipped out to the browser or is the underlying DOM composed finally of "standard" HTML? I ask this because it has implications on server side rendering versus sending pages as a more front-end heavy single page app.

This is gold. These web components are being used in Lightning Web Components in Salesforce

Absolutely agree with the thumbnail. When I first heard of web frameworks, I delved a bit into React and Vue. They are the most popular and they have so many goodies for them, as well as good documentation. I quickly realised, they are not exactly frameworks, the way they are built, they are like a totally new language paradigm, they prevent you from using JS and web APIs, or any other web standards, you can only do stuff their way. That's not a framework really, that's like a restrictive layer on top of the web, and a bossy one at that. It's their way only. If React can't do it, you can't either. You can't just use JS, you'd have to wait for future "features". And that's not gonna fly with the speed the web is advancing, or with the upcoming technologies, like WASM etc. In fact, I predict all those "frameworks" like React are gonna die the moment WASM becomes usable and stable. Anyway, good web frameworks are probably those that help you using abstractions, while they still allow you to use JS and any other web API or tech you want, they do not get in your way, and they themselves are based on web tech without braking any standard. I think frameworks like Lit, Stencil, or similar, using web components etc are the good ones. React and Vue redefined what web components are, and they even went further reinventing their own virtual DOM, when a shadow DOM already exists as a web standard. If you don't like web components, there are a few other minimal ones like Alpine or HTMX using different techniques that also don't get in your way. React sucks people, don't use it, don't invest on it, it's gonna die. The only people who would end up still using it are those who invested too much into it and are locked in.

web componets very cool but I see layot shifts How can I fix thats eg. slider

React is not a framework, it's just a library.

web components sucks

Great overview! I feel like I understand the shadowDOM a lot better now.

When I was at a full-stack bootcamp, one of my teachers who was a real smart guy from MIT was basically trashing on React. He said that web components and things like the shadow DOM already make your website fast, and that React was unnecessary for this (granted he still had to teach it to us). Ever since then, I've been super curious to see if it's really true. I wonder if someone can make two identical sites with React vs. Web Components & Shadow DOm, and see which ones faster.

very useful, one thing needs to be said though.
is not to add any attributes or content to the element in the constructor,
this will cause errors
use connectedCallback for this.

Thanks for the good website hosting knowledge! Ive experienced GoDady and HostGator, however Cloudways with TST20 couppon is the best money saver.

Great video, thank you

Because React is too bloated and web components are often enough, Lego JS came out. We've been using it for years now and it solved ALL our issues (easy to maintain, native -> fully compatible, no learning curve).
It give the web component the little extra skin to update, use conditions and loops for display. That's pretty much everything we need when developing even massive apps.

Nice video. Thanks for making these.

Great tutorial on Web Components. Thank you!

you talk a little bit to fast i think

nice hair

All your videos are simply brilliant. Love your channel.

Unbelievable content! Kyle has way of making complex concepts clear.

Speaks too fast, rushes through concepts, doesn't actually focus on the concept at-hand in each chapter, and doesn't give you enough time and guidance to fully understand what he's talking about. Maybe if he gave himself more than 25 minutes he wouldn't rush through it all and we might actually get some useful information from this video...

Really good content. Holy hell Javascript is such a shit show.

Cool now just let me create a react like framework with this

👎🏻 for clickbait

Very Nice informative video my friend.

Web Components + Zustand = ❤

Дякую!

which keyboard you are using?

React is overcomplicated and this provides the control I want. this is super cool

edit: I am never touching React again

This guy is the Andrew Kramer of the coding world. Clear, concise and explains the things that people may commonly not know.

Great video thanks! I've been using web components for the past three years and I absolutely love them.Much easier to work with than React. I'm never going back.

tooooooooooooooop

hi is there a way to map the shadow dom using Array?

My company uses them heavily, they moved from angular to web components and made their own library, it's still new to many new joiners coming from react/angular background, it's like a new playground for us but its fun, we get to learn more core stuff about javascript and browsers.

You can learn typing in 4 days of 45 mins a day, I took your great React course but typing mistakes ruins it, I think a basic typing tutor software for 4 days, and you are good for life. friendly advise to a great teacher. thank you

Great video, learned a lot, just small note, that it is a bit dirty to put a list into a list instead to put a list into a list item if you want a nested list

React fanboys are so whiny lol. Who cares about the thumbnail read the dang title.

Also they’re a bit sensitive because they know the end of React is near… might not be simple web components that kills it, but something will sooner than later

The only think can overtake react is qwik

laughs in vue.js

i wont remember you tommorow, because all this Todo and list manipulation i can you my way and you did 0 real life examples, so why i have to remember this ...

Man respect your audience feeling!
End of react, I just started learning it 😂

Bro i love your videos, they help me a lot. For me you have the best web dev channel. But this video i had to click on dislike

Greeting Sir! Hopefully you are doing well!
I am waiting for nginx crash course & integration with mern stack application
who wants this?

Lesson of this video :
Web component are very verbose.
React abstracts all this verbosity.
No it's not the end of React.

Really informative, thanks

Dont use cringe clickbaits please