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:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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

[@loogie5679]

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

[@ZhuJo99]

Exactly!

[@dannbrown]

I agree...

[@MelodyBeats.]

Agree

[@air_kene3419]

I was looking for this exact comment!

[@wiseman9960]

Maybe this kind of framework-agnostic, standardized tech will eventually end stuff like React. I mean yes the thumbnail looks like a clickbite but it could be as well close to the truth

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

[@ayushkushwaha171]

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.

[@Ryan-mg2uv]

This is the mindset to have, it's a great opportunity to learn something new

[@VisualArtRonny]

Nice, I love those things too, they're my main occupation :)

[@switchlyrics.]

Our company also use that

[@nix7705]

​@@Ryan-mg2uv Guys, you are annoying, i try to learn react with it's all libraries, but someone always saying "end this", "end that", "use something ${random} different", it is not about "Web Dev Simplified", it is Zoo

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

[@CirTap]

if you're already coding on that level, I'm surprised you haven't heard/played with web components earlier. They're basically supported since late 2018 and anybody who loves writing JS classes wet dream :)

[@zyriab5797]

You can even import your CSS in JS files with "CSS Module Scripts", it's basically a ES-style import for CSS files :)

[@chrisbolson]

Great video and great timing - I have just spent the afternoon converting one of my projects into a web component.

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

[@terasss2]

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!

[@orionh5535]

If you are into Objected Oriented programming, and are working on a front end only project, it really is the way to go. That is, if dont want the performance and SEO issues that come with straight up using react or similar without server side rendering If you are building a webapp you know will be big, yeah setup next js. If you have to build a few features, like a cart for an ecommerce site, i personally dont see a point in react.

[@subhasrini2706]

Same here👋

[@user-fr2fm3ri3w]

@@orionh5535 Seo is a myth it’s not 2007 anymore

[@nemanjatrivic9505]

Yeah i see this is maybe good to pair with old school backends like django where you need few dynamic components. Components are a good native way of doing frontend.

[@clnguye]

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

[@403gtfo]

Wow that is a lot of power and awesomeness right out of the box. Awesome videos.

[@jameshuggins2520]

Great video mate. Fairly new to web dev so possibly a silly question. could these be used a bit like handlebars templates to include global nav and footer elements etc?

[@LanbasaraEric]

Great tutorial on Web Component! Most frontend developers have only heard of web component but have no experience with it. I often hear people talking about Rust and web component together, can Kyle introduce the connection between these two things? That would be so cool!

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

[@Smartmetricai]

Great new thing I learned today now I can create my own tags ,etc it's very helpful!

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

[@CirTap]

nice overview of how these beasts work. 👍🏻 A bit more about scoped styles would've been nice. The "expandable-list" however is essentially + just lacking all their native features and accessibility stuff thereby demonstrating that it's often a really bad idea to recreate any interactive native HTML element from scratch. It's usually the lack of keyboard support, ARIA, and the presumtion that everyone is using a "fine pointer device" (mouse) with a scroll wheel.

[@MrVipulLal]

All your videos are simply brilliant. Love your channel.

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

[@al-gassimsharafaddin7289]

This is really cool! Thank you for pointing it out. I agree that it could happen that we no longer need libraries for most of these things. It's similar to how it was only through Bootstrap that you could easily make Grids and Flex but now it's something in most browsers. 👍

[@AgentZeroNine1]

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.

[@konfcyus4865]

Can you give any examples of a large app that uses that stack?

[@Kiev-en-3-jours]

@@konfcyus4865 Why would you need that? I don't know any big app whose architecture and code are high quality. Seriously have you ever look at Meta or Google websites? You have the worst possible mentality. Become an artisan, an artist coder. Don't follow the extremely bad practices of big corporate apps.

[@AgentZeroNine1]

@@konfcyus4865 Adobe Photoshop for the Web, ING bank, GitHub, some of Reddit, etc etc etc.

[@konfcyus4865]

@@Kiev-en-3-jours I would need that to have an idea and understanding of how they can be integrated to a large app , to learn. Afaik google and meta uses WC for some widgets , becoming an artisan requires you to use the most optimal tool to solve a problem , my experience with WC is that they are not optimal.

[@trappedcat3615]

@@konfcyus4865 Why does the app need to be large? What does that imply or tell you about using the web spec.

[@kwan9213]

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

[@stormybear4986]

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?

[@068LAICEPS]

I know lightning web components and always wanted to learn web components. Thank you!

[@allenbythesea]

I've been getting into WASM a lot lately and self contained components are amazing to use with the blazor implementation. I think this is the future of web development. The concepts are tricky though and I, like others need some time to absorb it.

[@abrotherinchrist]

All the pros seem to be talking about it these days. "Don't forget Rust."

[@ErickPereziChido]

Great tutorial on Web Components. Thank you!

[@isachinj]

Do you need the outer wrapping span around the slot if it is anyways going to replace the slot with span coming in?

[@sherifbadawy8188]

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

[@tk4776]

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

[@ibgib]

Ah ty for specifically mentioning inheritance. So you have implemented this DRY approach with web components? Any gotchas or tips/vids regarding this specifically? All I seem to find is using Lit/Stencil which seems to defeat the non-framework approach.

[@ascourter]

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

[@TechInterpreter]

Thank you for this video. I've been using Vue and the various slots for is components for a while now. I don't see myself writing my own custom elements. But this did help me better understand what's going on under the hood in Vue. And that makes it easier to use and, undoubtedly, I'll make better use of what Vue can do. The slot feature won't seem like a mystery in a black box now.

[@chinmayghule8272]

I just recently learned web components, and they're really awesome. There's also Lit framework based on web components. I hope you can also make a video on it as a followup.

[@trappedcat3615]

Lit copied core concepts from HyperHTML and gave no credit to the dev. Is what it is, but I'd check out the original work.

[@plopplok9461]

@@trappedcat3615 lit is based on polymer that was the prototype for the w3c for web component.

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

[@7heMech]

This is awesome, thanks!

[@AhmadMaartmesrini]

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

[@ashik_moosa]

Certainly need a tutorial on lit element with javascript & its benefits over vanilla web components & server side rendering supports, declarative shadow dom

[@MatthewM770]

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

[@user-ui5uu8ps4b]

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

[@abhijeetprabhu4117]

Nice video. Thanks for making these.

[@Thassalocracy]

Thanks a lot Kyle on this video about web components. It turns out that web components can actually be shared between different frameworks (React, Vue, Angular, Svelte?) so this is one big reason to learn about them. Although TBH, this video does make me appreciate how much React has simplified building components, seeing as the class-based API for web components can be really verbose.

[@XCanG]

Honestly after looking at this I can say that it is better this way than too simple way. The biggest problem with react is that it do too much behind a scenes and if you don't know it too well you will make mistakes and wont understand how some things got work until you spend a lot of time with a framework and not just keep repeating mistakes, but learn new things and how better to write code with it, which becoming in the end a lot of time consuming task.

[@jscul]

Why do you do the updateStyles in the connected versus constructor? What's the difference?

[@niloneregato5097]

Great work!

[@uplink-on-yt]

I think something is missing from the video: emitting events from web components so you can addEventListener on your custom todo-item, to know when the user ticks/unticks them. Do you just bubble up the events through attributes like ... and this.addEventListener('change', (e) => this.onChange(e))... or something like that?

[@Fanaro]

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

[@CesarLP96]

name

[@nbbhaskar3294]

@@CesarLP96 es6-string-html

[@Fanaro]

But what about your recommendations for when to choose Web Components over typical frameworks?

[@alivenumber5]

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.

[@charbelboughazale3994]

web dev as usual with the best content, that can teach us about shadow dom faster than any other course, thank you for your hard work. If my development skills are awesome is because of this legend! 😜

[@CyberTechBits]

@WebDevSimplified Excellent video! Can you do a deep dive on js classes for your next one?

[@mohammadalaaelghamry8010]

Great video, thank you

[@karanjamadar9370]

The thumbnail of this video is going get an heart attack in react developers heart'😅

[@JordanICM]

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.

[@sitedel]

As is the custom "todo-item" checkbox will not be part of any form submit. Why ? Because the shadow DOM hide the checkbox from any parent form. To avoid this your custom element must either extend FormElement instead of HTMLElement or set the static "formAssociated" value to true. Like Kyle did for the "checked" style, your custom element should also mimic and propagate the behavior of the parent form element regarding state|value change, reset, validation ("pattern" property and :valid :invalid pseudoclasses for styling) and autocompletion ("list" property). The input may also act like a form element without extending FormElement by altering the formdata value generated on form submit. I don't like this idea because it implies that a custom component may spy formdata submits without being visible in the DOM (so could read or alter value from other fields of the formdata....).

[@AhmedHeb]

great job 👏

[@0xAndy]

20:22 Haven't you introduced an accessibility problem by appending a button element as a direct child of the UL? is invalid HTML.

[@Greg8872]

And also later on when doing sample of the nested list, shouldn't that whole second UL be instide a as well

[@nullternative]

Fellers... hope the point of the video wasn't missed.

[@felix-ve8jk]

Where did you copy those styles from 19:37

[@user-mu4pq6ls8y]

Do you have video for advance concepts in web component

[@ryanmorris5709]

What would advance styling look like for these custom elements? For example, in the various websites where this could be used, the projects might use bootstrap, materialUi, etc.

[@djalexxxgr]

I use web components almost 2 years for building Design Systems that are agnostic of the JS framework that are going to be used. Web components are feature proof because is plain JS and CSS. To build my components I use StencilJS that is a compiler that uses Typescript and JSX and in my humble opinion is superior than Lit Html.

[@jsonkody]

This is both amazing and very cumbersome compared to something like Vue .. which is why I wont use it unless it is absolutely necessary. But awesome job with the video, if I ever need it I am sure I watch it again :D

[@gm770]

As a big fan of Web Components, I would like to hear from the other side, How a front-end framework might be better. And leave out the fluff about community and a few less lines. I want to know about features provided. In the past, I have used the pre-TS version of Angular for about a year, JQuery for longer, and Vue for a few months. Using Django now on a project, but that's a back-end framework, not a front-end framework. Looking back, I would not return to any of the 3. Learning JQuery felt like a complete waste, since it provided nothing over Vanilla JS. Both Angular and Vue left me addressing bugs that were not mine, and I felt mostly addressed issues I didn't care about.. Only thing I liked about those 2 were how templating worked, but I was easily able to make my own JS code to mimic what I liked about templates. I also liked how Vue used fewer files than something like React, but WC's also uses just 1 file.

[@user-cl3gh9yi8f]

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

[@ashwin2114]

Keeping shadow root closed, Will the componemt render in UI?

[@JoshChagani]

I’d really like to see a web component button integrated into React. Like, how would you call onClick with a custom element and would there need to be something special within the web component to register that something in the virtual dom was clicked.

[@Pluvo2for1]

I'm less than 2 minutes in and Shadow Dom appears. Damn, I better go and look that up.

[@bobdinitto]

I too am ready to jump on that Shadow Dom. I've heard of it but I wasn't really sure what it was...

[@kshitijrangari7014]

How useful is Web Components? Usually modern day in industry the challenge we face is moving away from old front end frameworks to a newer one while still supporting the legacy applications. It would be great if we could have web components built in react that can have their own styles which are then embedded into legacy applications which allows for seamless transition from older to new framework.

[@RakeMeUp]

my man cut into his own sentence in the start lmao

[@shashankbhatt6342]

Very Nice informative video my friend.

[@prateekbhardwaj9943]

which keyboard you are using?

[@damar1967]

Is there a way to get syntax highlighter and completion on the HTML template? Passing string for the HTML and style doesn't seem scalable. I'm spoiled by typescript and vscode extension.

[@thecoolnewsguy]

es6-string-html

[@bmehder]

I'd love to see a first reaction video to Svelte.

[@noipsend757]

The best channel in youtube!

[@gmd2171]

Please make a one hour video on NEXT js . It would be a great favor Kyle 🌚

[@mauro21523]

Watch the Net Ninja

[@gmd2171]

@@mauro21523 Brother, Kyle has just another level of explaining stuff that I love. Net Ninja is a great instructor too. Thanks

[@planetchubby]

Many developers prefer to use frameworks like React or Vue because they provide a higher level of abstraction and a more opinionated way of building web applications. Additionally, React and Vue have large and active communities, which provides a wealth of resources and support for developers. One of the main disadvantages of web components is that they are implemented using classes, which may not align with a developer's preferred programming paradigm or style. Classes in JavaScript are a relatively new feature and some developers may be more comfortable using a functional approach. React and Vue both provide a functional approach to building web applications. React's components are implemented as functions and Vue's single-file components can be implemented either in class or functional way, so if you are more comfortable with functional approach, you can use frameworks like React or Vue, which provide a functional way of building web components.

[@outwithrealitytoo]

Yes, I agree about the frameworks. I do think they handle a lot of these "behind the scenes" scenarios so I don't have to. Not all the funky ins and outs are handled by every browser and the fact that the different frameworks implement the same thing differently shows that the approach is far from obvious. Frameworks are a good way of piggy-backing on the expertise of others and to use the new features without having to rewrite the application business level code. As I was watching this video I did occasionally think "I wonder if that is how Svelte does that?". Sure, you give up a bit in terms of absolute flexibility, but even that is not necessarily a bad thing ("style guides" vs "fantastic innovation - what do you want in your UI?). Selecting and customising components shouldn't be an every day task. Once you have them set up devs should be using them no re-writing them for every page. The aesthetic of consistency should be paramount. The sparkle of OOP tarnishes when it hits the real world. With the addition of classes, Javascript is evolving from a Poor man's Lisp to Poor man's Java - not a step forward. I'd rather see the world move from OOP to Functional than the other way around. But as with evolution where Platipus and Coelacanth are still perfectly evolved for their niches, perhaps JS is destined to have some dead-end variants.

[@rodelcrisosto499]

End of react? I haven't learn it yet. 🤣

[@mohtashimali581]

looks cool but it depends on whether we need to do it that way or not, else I would go for react

[@kumailn7662]

it would be good to write ui library that could be use in different framework, but i can't replace react or angular like frameworks

[@luzaw4957]

Slot is not bad. However, instead of extending UL element, I'd rather create a button with down arrow in DOM directly.

[@muhammadnishad.p.n1170]

I started react today 😄

[@chhavimanichoubey9437]

Same here im at beginning stage, and we see videos like this😶 demoralizing me

[@MahBor]

@@chhavimanichoubey9437 same

[@compton8301]

Don't fall for clickbait videos that make money off adsense- react is not going anywhere.

[@muhammadnishad.p.n1170]

Keep going…

[@Harmxn]

@@chhavimanichoubey9437 Just use React

[@aselivra]

I have never disliked a WDS video until this one, and it's only because of the click bait. You're better than that, Kyle. I'll continue upvoting all your other vids that don't resort to click bait.

[@malikpandey4896]

Hi Kyle! Would you like to guide us about Speech to text APIs? Please think about it.

[@Natrel62]

I just discovered that Web Components are a thing but at the end it looks a lot like a VueJs component (with slots, scoped styling etc) except it seems to be a bit more tedious. I think it can be nice for smaller projects and to grasp the components usage

[@shaikhyamin3464]

I would like a tutorial on next js

[@rishiraj2548]

Thanks

[@turing4991]

My whole life depends on this framework built by Facebook.

[@EzequielRegaldo]

You can import css from external file with type assertions and use components js native constructor instead plain html with innerHTML (its a bad practice btw)

[@Scuffy]

Explain more pls

[@paschalokafor9043]

Vue also has named/custom slots

[@yoyopo4111]

Is that part of under the hood of Angular?

[@thecoolnewsguy]

Exactly

[@brijenmakwana2040]

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

[@anshulanand02]

Bro he added "?" In thumbnail, he's bot saying he's asking, it's not that of a clickbait

[@bhavyakukkar]

@@anshulanand02 it's still clickbait via insinuation

[@Balkan55]

Id be more Concerned shady KZbinrs pedaling ai gonna replace u bullshit trend.

[@MahBor]

@@anshulanand02 So can i publish a vid with "US president died today?" And a thumbnail of biden with a cross on him and gain millions of views and lots of money? Is that fair? Isn't it clickbait?

[@Dwainegnd]

Everyone does this its not that serious. You knew it was bait when you read it but clicked anyway

[@biswabaral949]

can we not use the innerhtmlm thig

[@yolkyhorizon]

React is overcomplicated and this provides the control I want. this is super cool edit: I am never touching React again

[@winzyl9546]

you just dont understand react

[@yolkyhorizon]

@@winzyl9546 Now I am in a point in my programming career where I might never touch a front-end framework anymore. To be honest, yes. I do not understand React but now I don't have to.

[@geforcesong]

maybe helpful for vanilla js project. if you have already adopted React or other frameworks which support component, this looks too complex to be integrated.

[@asgharibraheem8938]

i think this include much more js and html n CSS that is why libraries and framework come into play, but in future these web component will grow because their native behavior

[@basil127]

I am interested with web component but too lazy to explore.. thanks for this video..

[@diegocamilopenaramirez6101]

But, what happens with state managment?

[@shahidkhan69]

It’s a bit tedious because of the imperative api. Maybe if someone creates a declarative api for this and also, what about performance?

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

[@SBDavin]

It's refreshing to write code directly against the web browser's API using current web standards instead of being limited to calling an opinionated library/framework.

[@ismailMerced]

I just learned it 🐸

[@navaneethbuilds]

Please also cover alpinejs ...

[@fueledbycoffee583]

I actually tried to implement web components, but when you have to deal with data heavy applications i find web components quite a pain to hydrade, pass props, share data from child components to components up the tree and so on... They are just so barebones. i ended up replacing them with Vue

[@chrishuhn5065]

How to hydrade, pass props and share data is exactly what I was wondering about watching this. Any tips for good documentation or tutorials besides MDN?

[@fueledbycoffee583]

@@chrishuhn5065 actually. Nope, i had to read the MDN WC documentation and understad whats up.. the thing is that WC dont bring reactivity to the table. So you still need to use (all be it, better separated) MVC pattern. And i never could get slots to work, so i could not have custom data inside my WC.... So totally discarted them. They are waaaaayy to bare to be functional for me for a real project. Unless you take the time to write a wrapper class that give a better DX for WC... they are not ergnocomic AT ALL

[@fueledbycoffee583]

@@chrishuhn5065 also to hydrate them and pass props you have to do this ugly thing where you pass to the web component a data propert like lest say "my-data" in the web component class register that property, set up getters and setters serialiase the input of that prop. Kf you wanted to pass and object or an array. Welp, you had to serialize it as JSON then de serialize it inside the getter of that property for later use

[@chrishuhn5065]

@@fueledbycoffee583 Thank you. It looks like it's as bad as I had feared it would be.

[@abnoco]

I'm still a novice. Just when I think I can see the bottom of the rabbit hole, I find out the bottom I thought I saw is really a turn and hole keeps going.

[@abdelrahman6319]

Don't get distracted by clickbaits, technologies don't go and disappear in a blink of an eye. In addition, react popularity is currently increasing and hasn't reached its peak yet. So stay calm and learn what you are learning

[@ZhuJo99]

I like to watch your great instructional videos. So please, so not fall into sensational titles and empty content bullshit like many other channels do (not related with web development). You don’t need this to grab views. Keep up the good work.