Custom Events Dispatched from Web Components

When you build web components, you are generally building a new feature that is intended to be used by other developers and on multiple websites. This means planning the features and building them in a way that won't cause issues on other other websites.
This tutorial explains how to use CustomEvents, CSS Properties, and private properties inside the component class.

[Felipekimst]

Nice, been missing this guy's videos

[proletariat-metal]

I really appreciate your content on web components, and have been building a serious web app using them since early this year.

I'd personally love to get your thoughts on state management across components, good design patterns like extending a "base" component, etc etc.

One thing I've been doing is utilizing my own FE cache/state management utility but it can be quite the challenge sometimes haha.

[Denis_Jin]

A hundred subscribers!
Congratulations, Steve!

[ahmedsabryhussein]

Hi Steve, can I pass w3. IncludeHTML url to the web component and load it from there? I tried it and no error in the console however the page doesn’t appear. Thank you

[SnakePliskin]

Hi prof, first thanks for all these lessons which are really helpful for me even though I've been using js for quite some time now.

So I've followed with the coding and just reused the code for the different videos in your web-component playlist. My question is by the time I switched the script to type='module', the function declarations no longer work and window[this.action] (for the custom event video) is returning undefined. Is there any way to keep that with the type='module' so we only use a single external script file for all the external/custom functions for our web component?

[ΕγωΕγω-ρω]

We all have to thank you for your excellent work 🙏

[keshabheda]

Hi Steve.
Thanks for great explanation on web components.
We have created a web component which will be used by another application.
There are few events to be passed between the application and component.
We were looking at Singleton EventBus kind of approach but are not sure how to implement this.
Can you provide guidance or some sample on how this can be handled ?

Regards,
Keshav

[antonio_carvalho]

Excellent video as always! Thank you so much for this content. I hope more people get inspired to create their own components instead of relying on enormous frameworks and libraries for even the simplest projects.

[slime_camp]

Your voice is so nice for this kind of content

[paulh]

is there a way to clean up? in your component, you created a listener, can it be destroyed?

[eugeniogonzato]

Very nice example, you are the best !!!

[paulofernando]

If anyone is interested, there's this vs code plugin for literals: es6-string-html

[netssrmrz]

Nice video. Not sure about the shadow DOM though. It's optional so I don't see how it's relevant to the custom event aspect.

[AbdulMajeed-jz]

it's awesome ! some time i really thinking that why we use react if we have web Components in js 😁😉

[Nikhil_NnN]

I am your New subscriber and new to programming world
so can you please tell me how to follow your lecture (i mean sequence).
please help!!!
🙏🙏