Web Components Crash Course

This is an introductory crash course on web components including custom elements, shadow DOM and HTML templates.
Code:
codepen.io/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Course Links:
www.traversyme...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

[@TraversyMedia]

If you want to look at some more in depth examples that are still pretty understandable, check out - github.com/mdn/web-components-examples. I know this is a lot to build some user cards, but the point is to show you how to do it so you can build bigger and better things :)

[@ebol08]

Awesome! I recommend reading "Please consider not adopting Google WebComponents" available on Hacker News.

[@AnkitKumar-fn8xf]

Please do a course on web components with story book, Tree shaking bundlers

[@justinoneill2837]

@@ebol08 ​ Read "Web Components VS Frameworks". It's an article I wrote on Medium a few years back.

[@ragnarok7976]

You might be interested in StackBlitz. It's basically VScode in the browser. It also has a bunch of pre-built projects templates and a live code viewer built in. Pretty much looks like what you have set up there except you wouldn't need to split Code and a browser or run a local server.

[@tommyshaw2420]

@@ebol08 I dont like this, it honestly feels like google is attempting to make the web into their own personal app store...

[@corneillealimasi1530]

it's like I wasted my time watching other web tutorials, but since I came across your Traversy Media channel, I have become fans and addicts, thank you, you do well and clearly explained, we expect more from you.

[@dazelmann6589]

Geez hold up, why don't you dig out the stuff reading docs and practicing .... And then trying to lay it all off in a video. And then someone comes along and say we expect more from you. Keep up. Give the guy some hold off....

[@ktb8n737]

Your tutorials are great! You provide comprehensive explanations of WHY and WHAT which most tutorials skip or skimp. I really appreciate how you don't assume your viewers know certain things - THANK YOU

[@googacct]

I have been a programmer for about 20 years and have been watching your videos for several months.I mostly do java backend development, but use other languages as needed. I was recently tasked with doing my first fullstack javascript project. Your videos have been extremely helpful in allowing me to get up to speed quickly on the latest frontend techniques and increasing my versatility in my day job. Thanks for putting these videos out there.

[@lewissheridan]

Brad - I watch a lot of videos on KZbin pertaining to Web Dev, and there's a lot of content out there, but your content proves to be by far and above the best I've come across. @2.22M subscribers, I think I'm not alone in my views here. I'm grateful you continue delivering these great crash courses!

[@gerryjtierney]

Brad Traversy continually giving his expertise and time to the community. This man is the rising tide that raises all ships.

[@xzex2609]

today I watched a video about web components for the first time and I didn't get any of it. so I look for it in brad's channel. you cannot imagine how declarative and easy you make the stuff that you teach.

[@justincantley9705]

If I'm searching for tutorials on a subject I want to learn, and I see that you've got one on it, I will always watch it first. Great job as always on this.

[@saloniyadav7249]

I had gone through a lot of blogs before finally youtubing about it. Nothing beats this tutorial. Now I can go back to those blogs and finally make sense! Thanks man! This is awesome and much appreciated!

[@gojoe36]

Been all day just about doing one of Brads tutorials....FOLKS for the price he sold it for.... I don't know how he stays in business....but I am enjoying the heck out of it for $11.00. I been at it for 3 days and got 1/4 of the way through 1 series, bought 3. The level of teaching versus price is way off...but I do appreciate it for sure....AWESOME JOB Brad. 👍👍🐱‍💻

[@yahayaoyinkansola8258]

Web components are really awesome, they make you have that component based structure that are in javascript frameworks and makes writing html less painful, instead of having to copy the same piece of code each time, thank you Brad

[@saulgood2548]

Brad is making sure we stay sharp during the pandemic! Appreciate it!

[@TraversyMedia]

Yes, definitely. As much as it sucks, take the time to improve knowledge :)

[@matthewtetley7048]

@@TraversyMedia Is this a similar process as to how some parts of Angular and React are written, the displaying of it at least

[@Jennifer-ju8de]

Can you imagine it’s been year already?

[@hnasr]

That is why I like. Vanilla Javascript and components . Thanks Brad!

[@diManjenje88]

That’s a very useful tutorial like always. After watch your video “What Learn Before a JavaScript Framework”, I came here cuz I didn’t knew anything about components, and this video was very helpful. Im doing your course Modern Javascript on udemy and it fills all of JS “gaps” needed to learn Angular (that I need cuz of the work)… Thank you so much Brad, you have been blessing us with very useful content for free. May God bless you back.. ❤️ from 🇦🇴

[@devingray1761]

I desperately needed this. I know react but I got tired of not knowing how to correctly answer "Do you know how React works?" This has definitely opened up my understanding.

[@brunofilgueiras3518]

every time I am starting in a new concept I like to refer to Traversy Media, never disappointed.

[@RemoteJuniorJobs]

This is one of the most beautiful things I ever see on web development! Awesome crash course as always!

[@blossombabalola1234]

This is so helpful, thank you. Been using react for my web components until recently when I was asked to use just vanilla js. I was confused, didn't even know that was possible. Brad swoops in to save the day again. Thank you.

[@bankoleesan2129]

I'm so happy right now... I love how you always follow through on things Brad. You said you'd do it, and here it is!!! A video on Web Components (You promised this in your Vue Crash Course 😄). Thanks for being so Awesome Mr Traversy. My Hero and the darling of the global dev community... Stay safe, healthy and blessed always Sir 🙏, you and yours.

[@TraversyMedia]

Banky K thanks 😊 same to you my friend.

[@anmolagarwal5952]

Your way of explaining things step by step and the art of breaking things in little understandable parts is amazing. It make things a lot easier than they actually are! Thanks❤️

[@selinov]

As a Californian, I could listen to Traversy say "dra-wer" all day! 😆 Love your mission and your execution, man. Thanks for all the lessons. 👍

[@billgilmore8063]

Quality no BS tutorial... and may I add, by the voice of an angel. I found learning very easy with the chill vibes of this guy. Also this video goes perfectly with some lofi beats

[@budket2513]

If you need a video idea then I would suggest debugging code. I haven't seen a tutorial on your channel about it and I don't know how to use VS code debugger.

[@cjwebdev]

@@budket2513 That is a great suggestion. I would love to see that tutorial and it's (Brad "the alien" Traversy)😁 My gorgeous friends. 😁

[@RNMERIA]

that is a very good suggestion

[@anthonypetruzzi158]

You could do an entire channel dedicated to "deep diving" through visual studio code. It has so many features it's mind blowing.

[@BjornBrasse]

Great idea, looking forward to that crash course!!

[@hj1ax]

I don't really know how to use the debugger of vscode.

[@priyankadey3337]

Thanks for this amazing course ! Back in 2014 I was learning jQuery from your tutorials now I am learning web components .. time flies :) Thanks for all the great work!

[@soroushyaghoubi7709]

one of the most useful videos on youtube. Very well explained. Thanks!

[@huytrankhac8729]

Always short, clear and comprehensive. Love your courses because those provide maximum knowledge in the minimum time.

[@garyclarke8238]

Incredible Video - I think web components are the future, they will eventually replace React Vue Angular etc So this a very important topic, they are quite a challenge to teach, because they are so powerful . This is by far the best explanation I have ever seen of web components - in both video or text. So clear so concise, amazing how much ground you cover in less than 30 minutes, custom elements, shadow dom, html templates, slots, styling and interactivity. Well done and Thank You Brad.

[@muhammadseyan8361]

This is what they said back in the days. Literally no one uses them anymore lol. Awkward to work with

[@Levelupment]

Have literally been looking for tutorials on web components for a couple weeks, not much new content out there. Thanks so much for making this vid

[@aldocaamal7740]

Web components are not new, they have been around for some time, but the thing is that were buried by React & Angular when they came out (which use them under the hood). Why you dont see to much content about it? well, the frameworks keep updating and there is not much need to implement web components by yourself

[@Levelupment]

@@aldocaamal7740 yes I'm aware they aren't new, but I just learned of their existence recently and all the material based around them is from a year or two ago. I understand they may not have changed much but it's nice to see material that isn't a couple years old, and even then there aren't anywhere near as many videos on web components as there are other technologies.

[@aldocaamal7740]

@@Levelupment We often think that content from years ago wont help us, I have been on that place, but it will still allow you to understand how something works, many times older documentation has saved my butt. And also KZbin Dev channels, most show pretty basic stuff, articles and documents are the best way to learn

[@Levelupment]

@@aldocaamal7740 The best way to learn is subjective, while I believe solid documentation is definitely one of the best resources, I personally find value in hearing (or reading) things explained in different ways and from different perspectives. Additionally, this specific technology is one with a vague enough name to make it that much more hassle to track down relevant information.

[@aldocaamal7740]

@@Levelupment Yeah I get you; you can call this specific case "custom elements" or "reusable components". Is great to see you are one of the people that really want to dive in more complex architectures, and sadly KZbin will fall short in most topics, tho I expect to cover them in the future. Really love some great chats like this one, have a good one Nikolas, success for you my friend

[@IsaacAsante17]

Yes, I needed this! Brad, you make everything look easy. Keep up the great videos!

[@pxlmoddigitalartsstudios2300]

Finally, for many years of using "John Doe" as a test value. We now know what John Doe looks like 😂😂😂 Kidding aside ... thanks Brad! this excites me to jump to my computer first day in the morning to try this out.

[@solarspear27]

Thanks for the advice Brad. You prove time and time I didn't go wrong when I first subscribed to your channel, you add value to my time.

[@badral-balushi5911]

Best web component video I have seen till know ! 👏👏

[@TheNerdyDev]

Brad, you are never short of content. Top notch stuff as always.💥💥

[@arturoguillen]

This is amazing! In case you guys didn't know, KZbin is made with web components (no react, no vue, etc)

[@majidmoradi5952]

reeally?

[@arturoguillen]

@@majidmoradi5952 Yeah! When you use the Firefox Devtools to inspect the DOM you can see custom elements definitions all over the place. I think KZbin uses Polymer for its custom elements. Some examples of the custom elements used in KZbin are ytd-app, ytd-page-manager, ytd-comments, ytd-popup-container, yt-page-navigation-progress, etc. You can inspect the DOM yourself to check all of those out

[@maskman4821]

Thank you Brad for this very cool web component intro tutorial, I've learned something, now web-api is getting powerful each day, I think in the near future single page application is gonna become part of browser, just like vue, react, angular, so there is no need to learn those fancy frameworks, native browser api is gonna takes care of everything !!!

[@andresndergaard1712]

I'm about to prep for a front-end interview for a role involving Web Components. I've never worked with it before. I've only heard of it. This video was just f@#king awesome Brad - Thank you! 💪

[@blessdarah1256]

Hello Brad... it's like you read my mind! I've been searching for a descent and updated course on web components but I've been meeting outdated trash all over the web. Please do more in-depth web components tutorials. Thank you for your unending suit of tuts

[@Dman2028]

Man I love your stuff, when I go to buy a course its always yours, appreciate your work!

[@SelvaKumar-kq7pz]

Worth video tutorial! Watched this video fully without seeking! Using web comp, every developer can create js frameworks!

[@codezero6023]

You are definitely my go to guy for introduction to new web tech.

[@puspamadak]

This tutorial was great. You have explained everything in so simple and step-by-step way that I got the basic idea and concept.

[@stineandthebooks]

Thank you so much for this video! I'm studying for exams at the moment and this really saved me!! :D

[@Oygen_]

Nice video. But removeEventlistener() needs to be called on an element with arguments of which event to remove and which function.

[@shilangyu]

was looking for such comment. His implementation has a memory leak

[@KrzysiuMax3000]

true

[@mcvgs1780]

Web components is on my list of things learn and lo and behold your video popped up. Thanks brad

[@timderks5960]

This is a brilliant tutorial, thanks! If I may give some unsolicited advice though: I wouldn't start with the PowerPoint. It may work well for those that already follow you, and just want to learn classroom style, but I almost skipped your video because of it, since I expected the video to be 100% theory, without any practical information because of the PowerPoint. I was looking for a way to get repeatable elements in HTML, because that's what I need right now in my development, so I need practical examples. I want to see code, so I can type along, and I want to see results, basically exactly like you did starting at the 6 minutes mark. In my personal opinion: I'd attach the PowerPoint (as a PDF) to the description of the video, for those who like that quick reference, and just start with the practical stuff immediately. You can always explain the theory while also showing that it works. I've had a lot of professors bore me to death with hours of theory, which only started making sense when they put it into practice.

[@ThiagoVieira91]

MIND = BLOWN 🤯 This tutorial is a career booster, Brad. I have been long searching for the missing link between vanilla JavaScript and frameworks like React and Angular. This kind of tutorial, showing how frameworks function under the hood, is simply gold. This is the kind of content that makes me tell about you for every developer I know! 💪🏼

[@bishalsenhdri7655]

BEST Professor of This Planet.

[@arnopisspot5115]

Bishal Sen HDRI the net ninja is better but he good too 👍

[@i.j.5513]

A very understandable introduction to a complex topic!

[@TheWandererDoc]

brad the rock n roll programmer

[@starkxz]

I really need this crash course. Liked before watching. Thanks Brad.

[@sanyavanya]

The "move the line up" key combination sparks joy.

[@mylesdavies9476]

Really interesting stuff, I've been using Vue for a while now and thought the main building blocks of Vue were pure sorcery, however, after seeing this it's clear to see where it comes from. Cheers 🙂

[@swattertroops-yaaa]

read the source code

[@BESSA-uq5fs]

Every Js-Framework Developer should watch this

[@TKomoski]

Different never knew this existed, never know when I would use it. Just love following along with your video's and banging out the code.

[@sovereignlivingsoul]

excellent video Brad, i really like this concept, it is a bit clumpy, but no more so really than any other framework, much like using CSS3 Components to reduce development time, building your own web components can be very useful

[@hezekiahvaldez2943]

you're the BEST FRONTEND GURU!!!! thank you very much sir Brad!

[@salemexpress3014]

Deserved 1M likes

[@covid20pro86]

i was looking for this. i want to create a single page portfolio web with reusable components web but without Vue js. keep up the good work

[@culturapoliticaycomputador9999]

From Honduras thank you teacher Brad.🙏

[@kabandaclovis6915]

I always enjoy watching this channel, Thank u Brad!

[@michaelantoni8274]

Wow just before I sleep new notification on my youtube.. Nice one Brad

[@tahasoft1]

Great Brad. It will be also great to add another video about using lit-html and LitElement to create web components. I'm using litElement for many months at my work and like it.

[@russellabraham9208]

Thanks for the video. Using template a lot lately with regex, replace, and DocumentFragment, never tried shadow DOM. Cool.

Great crash course Brad, I had no idea this was possible!

[@charbelsarkis3567]

Never knew this was possible. Thank you for this knowledge.

[@CodeDreamer68]

Thanks for putting this together. Great primer.

[@sachin6689]

Liked before watching. You r best 👌

[@zaakhirpouzi283]

yea i did, before i saw ur comment.

[@rudrapratapsinha8880]

mmm khete chaiaiiiiiiii

[@compteprivefr]

I never do this...I always assume that he might fail and put out a complete disaster of a video. Hasn't happene dyet but I remain vigilant.

[@pengekcs]

I just looked into web components a few days ago with a packt course, but still insta-liked this one :) -- then watched this and still liked.

[@ephraim-duncan]

I really like this course. Thanks Brad. I'll learn to be like you one day.

[@estebanmunchjones7946]

great explanation Brad! best of the best

[@realjackofall]

Excellent introduction! Just what I needed. Thanks for making this video.

[@noelpastrana5100]

I love you maaannn... you just made everything easy for me :)

[@davidluhr]

Really great overview! It should be noted that extending existing HTML elements unfortunately isn't supported by Safari at this time 😠 It's too bad, because this would be super useful for extending native semantics and functionality for semantics, while also reducing the nested internal markup. That being said, custom elements still have a lot of value!

[@thomasfrancis6110]

Great Content Brad, love it !!

[@jrespuny2427]

Thank you very much for this excellent educational content making the difficult easy

[@gilmoretj]

Excellent video. Might be a simple Web Component but a very effective demonstration.

[@jame_sta]

@Traversy Media - Great mini crash course! I'd love to see a more in depth course with you explaining & showing more features/advantages of W3C's WebComponents! React,Vue,Angular all have their own way of implementing components but they are only specific to those frameworks/libraries & not reusable elsewhere. WebComponents has been out for years and it's time people start using them! They are native, faster, less code bloat & more performant than having to implement React/Angular/Vue WebComponents. Safari has such a bad code base, they would need to rewrite their engine just to support Native/Vanilla W3C WebComponents, as of now they have declined it's support for WebComponents but you can use Polyfills in place for support. I'm not even sure if React/Angular can support Native WebComponents as if they force you to use JSX (Please correct me if I'm wrong) or Angular's WebComponents (code bloat). ARC.js (ARC 2D) Will soon be released that has all these features built in, a powerful native object oriented framework that can also be used for developing 2D games. When documentation is completed I'd love for you to test out the ARC.js Framework Brad!

[@godfathermikal]

Great intro! Just needed a quick overview and this was perfect! Thank you.

[@ougininja8412]

Amazing tutorial, clear explanation

[@culturapoliticaycomputador9999]

Brad thank you so much, for these kind of videos. You are awesome my friend, thank you for share it with us.👍

[@mosesnandi]

Brad's intro is sick! I wonder where the inspiration came from.

[@atibyte]

At least i know now what are Web components. Thank you Brad!

[@mouadtaoussi42]

Hello Brad Traversy ! Thank you for your stunning content. extremely helpfull

[@zakhariihusar6975]

Great tutorial 👍. Just as clear as your videos on DOM

[@education24carat]

Brilliant Brother It was nice and Very much Helping. Thank You Very Much

[@m12652]

Is it necessary to include the styling and all the code within the component? Wouldn’t a complex component get a bit heavy on resources if there were multiple instances? Cheers....

[@mohamedbensalah7169]

I just finished the tutorial... it's awesome...Thank you

[@RiccardoCarlesso]

Very well done my friend! Amazingly well done. Thanks!

[@paeon21]

In this example, what is the reason for needing to remove the toggle-info eventListener with the disconnectedCallback function? I'm trying to understand web components from the perspective of vanilla javascript, but I'm getting stuck on the overall purpose of lifecycle methods. Are they simply necessary to define the start and end of web component code in a javascript file, similar to how html elements all need a starting and an ending tag? And many thanks, Brad, for all of your helpful tutorials!

[@MrSidMan]

Another great tutorial that clears the clouds... Thanks Brad!

[@musedoom]

Great introduction to Web Components.

[@anomalish]

Awesome tutorial! It really helped clear up a lot of confusion about web components for me. :D

[@GorillaDevFB]

We use Polymer at my company currently. With LitElement/ lit-html improvements, we'll basically be on native components before too long.

[@unnhao]

very easy to understand! useful for me.

[@DanielDrummond2k6]

I would love to have a course like this in a professional application environment. A real project using this technique

[@ilayaraja-selvaraj]

Excellent content. Thanks for sharing this. Once created, how to use it in different projects irrespective of any JS frameworks? For example, if I want to use it on my react project.

[@mario1ua]

This makes perfect sense, thank you!

[@usuarioaleatorio336]

it is so good tutorial....it helped a lot...subscribed

[@AccessCode101]

Wow.... You read my mind. I was looking for this in your channels yesterday. Thanks.

[@attainconsult]

excellent starter on Web Components

[@ikrarkhan1]

congratulations sir for 1million family 😊😊