Learn Web Components In 25 Minutes

React was the framework that really popularized component driven development, but they weren’t the first and are definitely not the only tool for creating components. JavaScript actually has its own built in way to create components called web components which have many of the same benefits of React components. In this video I show you how to create your very first web component as well as how web components work.

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
01:36 - Basic Web Component
05:07 - Shadow DOM
08:32 - Slots
13:00 - Lifecycle Methods
17:40 - Extending Existing HTML Elements

#WebComponents #WDS #JavaScript

[loogie]

Man, you don’t need those clickbait thumbnails. You make amazing content and that’s enough for most of us to watch all of your videos

[ayushkushwaha]

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.

[bobdinitto]

Well, Kyle, you just blew MY mind... I'll have to watch this video about 4 more times to fully absorb it but my first take is that this is incredibly powerful and somewhat fortuitously perfectly meshes with the technology that I've recently developed for my current project. I built a class-based component system from scratch which allows me to encapsulate the HTML, callbacks, and event handlers of a component into a Javascript class. (I punted on the CSS - it's all in one big file!) So all of my components are ALREADY Javascript class instances. By tweaking a few things I can perfectly integrate with web components! I'm floating on a happiness cloud right now. Thanks for this, I'm going right now to get a celebratory beer!

[raulnoheagoodness]

I've watched a number of your vids, but 2/3s in, this is my fave of yours ever by far. In recent years I've tried doing web components using Angular and Svelte. But this vanilla is version is super clean!

[CrzyMan_Personal]

I see where Svelte garnered a lot of inspiration! Svelte doesn't use web components, but I just really appreciate the abstraction it allows that work in a very similar way.

[terasss]

I'm still somewhat derusting on Web Dev and sticking to more basic techniques, but I will come back to this tutorial as I can definitely see this becoming useful in the future. I can also see why it may be easier to just use a framework such as React ;) . I also wanted to say that I really love your channel and everything you show in your videos!

[AgentZeroNine]

Web Components + CSS Module Scripts (import assertions) + CSS variables (Custom Properties) are the best modern web APIs in my opinion. They make developing large web apps a lot easier to maintain. Also, Redux and MobX work very well with Web Components.

[brijenmakwana]

Why this coding youtubers using clickbait. End of react?? Seriously.

[dazraf]

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.

[airpancho]

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.

[MrTiulia]

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

[sherifbadawy]

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

[tk]

Web components have been the future since 2015, I’m amazed people isn’t using them. WC are based on web standards which won’t change depending on the framework you use, react/angular/vue standards change from versión to version, but WC don’t.
The learning curve is a bit more challenging. But man the re-usability is endless.
You can have an input-core component with tons of custom features/events/attribute and simply when you need it import it, but if you need specific things but not necessary to change the input-core wc you simply extend the input-core and make a new one with the benefits of the base class and the benefits of the new implementations without losing time

[faithmorante]

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 :)

[clnguye]

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

[Fanaro]

Another minor tip: VS Code has an extension for syntax highlighting HTML or CSS template strings.

[uiuupsb]

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

[MatthewM]

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

[stormybear]

Kyle, I am constantly impressed by your professionalism and the scope of your knowledge. you are obviously very well-educated, you always use correct terminology and clearly understand the terminology quite profoundly. I am curious about how you developed your knowledge, are you self-taught, did you do a good bootcamp, or what?

[punlx]

I use this to build amazing many companents. Web components so awesome