Web Components Crash Course 

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

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.

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

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.

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

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

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

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.

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

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

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.

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

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.

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.

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❤️

Brad - I watch a lot of videos on RU-vid 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!

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

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!

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

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

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 🇦🇴

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

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.

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

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.

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

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.

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

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

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

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

I always enjoy watching this channel, Thank u Brad!

BEST Professor of This Planet.

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.

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

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

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

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. 👍👍🐱‍💻

Every Js-Framework Developer should watch this

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.

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

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!

brad the rock n roll programmer

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.

Liked before watching. You r best 👌

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

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.

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.

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 🙂

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

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

From Honduras thank you teacher Brad.🙏

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

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

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

A very understandable introduction to a complex topic!

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! 💪

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

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

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!

Thanks for putting this together. Great primer.

Deserved 1M likes

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

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

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

Why do we need to use templates? Even when you use shadow root, you can still use shadowRoot.innerHTML = `...` and it will work as intended, when the benefits of using string template to have dynamic content.

Would you consider making a video on lit-element (Vite starter, lit-ts) that would also cover the publishing and build stage? Thank you!

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

Thank you very much :) When running the code I had a issue with giving null values to this.getAttribute('name') always. I could fixed it to moving following two code lines inside of the connectedCallback() method. this.shadowRoot.querySelector('h3').innerText = this.getAttribute('name'); this.shadowRoot.querySelector('img').src = this.getAttribute('avatar');

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

Very cool! What about litElements? Is there any advantage of using them instead?

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

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

Hi Brad ...how did we removed the EventListener without passing the event type and the callback name (which actually is an anonymous function)??? ...... Thanks ...

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

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

Amazing tutorial, clear explanation

Outstanding tutorial. I had no clue about any of that. Thank you! May I ask, is this topic covered in your recent javascript course?

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!

excellent starter on Web Components

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

I see a problem with template creation. It feels like template element should be defined inside the class. In SPA provided custom element will pollute DOM even if that element is not going to be rendered. Another thing I see, is that "this.attachShadow" already returns reference to the shadow root and you don't need to attach it separately. Information taken from MDN.

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

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

This makes perfect sense, thank you!

Are web compenents a solid choice for the future? Which criticism would you have (styles in JS maybe)? Are there other workflows that trump WCs? Awesome tutorial on the topic regardless.

Extremely useful👍 But in my case I have 4 different sections only with identical title and description. Other content of my sections is different. How should I create my template for these sections? Thank you in advance🙂

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

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

LitElement makes this way easier. It's also declarative. You should do a video on it.

I have a question though. Styling the elements by the class name from external style css doesn't work.

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

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

very easy to understand! useful for me.

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

Thanks Brad.

Great introduction to Web Components.

Some answers I found to questions I had: Most answers are from this resource: developers.google.com/web/fundamentals/web-components Really recommend reading that through if you are stuck on something. 1) Why create a template in the document then copy that to the shadow root? > Template is a special HTML element that will not render even if you explicitly type the tag out in your HTML. It also comes with some behind the scenes goodies that makes copying elements from a template more performant. Long story short, it might look a little ugly but this will be faster/more efficient. 2) How are you supposed set styles for the actual custom component not just the stuff inside it? There are no CSS parent selectors! > Well the quick and dirty answer is the class you created is the element so: this.style. = ""; will work! > The downside to this is that in the inspector your element with, lets say a set display to block rule, will look like this: > Oof that's really ugly and isn't really in keeping with the encapsulation of components we are going for! Not to mention overriding those styles later will be a nightmare! > *The Best Answer:* Use the ":host" selector in your elements template CSS like this-> :host{display:block;} > You can still see styles listed in the inspector but they won't be in-lined on the element which will make overriding them from your pages main style much easier! I will update if I come across more!

I loved this video. It's similar to things I was learning in Angular. During the video you used css. Can we use sass instead of css for the web component styling?

Great Content Brad, love it !!