Intro to Web Components - Full Walkthrough

A brief introduction of web components technologies, best practices, tricks, and guide for web app components. How to create simple custom elements, pass and consume data through attributes and properties as well as how to extend template with slot placeholders.

Join this channel to get access to perks:

[Mentioned Posts]

[website]

[Blog]

[Follow]

[Source Code]

[BeforeSemicolon]

Do you use Web Components in your projects at all? If so, how do you build them?

- from scratch
- using a package (which one?)

[MuhammadQosim]

Your Way to make tutorial video is helpfully amazing!

[DarkEternal]

This single video was more helpful to me than any other resources I could find on Web Components. I read documentation, looked at code examples, took classes, and this single video is SO MUCH BETTER at explaining the how and why of using Web Components. AND you even give best practice advice!? AND give accessibility tips!? You've gone above and beyond in this video, thank you so much!

[blessdarah]

I've been looking for something very elaborate as this. Thank you for this course.

[TheBorninmotion]

OMG, thank you bro its just what i am looking for, i am currently using vue with nuxt on my projects but looking for something to get out from frameworks and its dependencies, is it time to start with web components or i should wait a little bit, what do you think about it ?

[creativeuzi]

Thank you for this useful content. There's not much resources on web components bad the downside is that it's not supported well on all browsers.

[whatthefunction]

it would be great if you would add chapters

[morethanpixls]

Dude, amazing walkthrough. Liked and Subscribed.

[bonsayeb]

Thank you very much for this video. I noticed that while your in your JS file, your VSC is able to recognize HTML syntax, how do you get VSC to recognize HTML syntax in a JS file?

[josefranciscodelarosaibarr]

Great job!
I'm moving to web components and this video is usefull to me. Thanks a lot.
I wonder which extention are you using to format HTML code into a JS file...

[AlexDudeOriginal]

Highly appreciate this content bro <3
I will make use of it when restoring one of my older projects :)
This CSS detail you been talking about, the default value inline for display, been making me crazy for quite some time back in the days^^
Finally I got the clue.... Well, at least better late than never haha

[MrBoiks]

This content feels like a breath of fresh air... Like thankyou.

[patricknelson]

I'm a dinosaur and had been using jQuery still for years on a large long lived project (for various reasons, partly due to legacy code maintenance). However, one time a year or so ago I was in a pinch and needed to built something somewhat complex that needed to exist inside of another website but obviously couldn't be an <iframe>. I looked into web components and, with *no build system* at all, was already immediately off and running with a solution. That's one huge advantage of custom elements and the suite of other standards (which we collectively refer to as "web components") offers: "It just works" and it works out of the box. Super fast, native and etc. That's not to say other frameworks aren't very powerful as well, it's just that it offers you so much with so little overhead that it's hard to deny the utility of web components. _Particularly_ if you're looking for ways to integrate them into a legacy codebase.

[simobermaki]

I came here looking to learn about Web Components, and boy did i learn a TON OF NEW STUFF.

[indratanaya]

Wow, this is a very nice video, man! What extension do you use to highlight those HTML wrapped in a string?

[adren.official]

how can i highlight the HTML syntax in js?

[jackob_music]

Hello! I have a question: Is it possible to send a function to a web component from the outside of it? I'm struggeling on this for over 5 hours now. I did a modal component with a lot of attributes (description, title etc.), but I need to get some specific backend functions to the component. Do you have a way to do this?

[JacoFett]

I'm doing a project that uses web components at the moment and I cannot find out how to select my custom element in the DOM.
My script inserts my <custom-element> and I try to but it returns null! If I go into the console and type the same thing in, it finds my custom tags.
My Web component works as normal, I just need to select the tag to change the attribute.
What is happening here? There are no posts I can find addressing this.

[ferdygnteng]

bro, I want to ask a simple answer, it's okay. What's the difference between using the web component and using as a font on icons?

[romilsikka]

bro awesome work amazing job thanks a lot