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.
Code from the video: github.com/prof3ssorSt3v3/cud...
Custom Web Component Playlist: • Web Components

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

[@Felipekimst]

Nice, been missing this guy's videos

[@pjosxyz]

Best dev channel on youtube

[@slime_camp]

Your voice is so nice for this kind of content

[@eugeniogonzato]

Very nice example, you are the best !!!

[@Vhc706]

The king is back!

[@Denis_Victorious]

A hundred subscribers! Congratulations, Steve!

[@Denis_Victorious]

* one hundred thousand, of course ^_^

[@user-sr9nh3lc2x]

We all have to thank you for your excellent work 🙏

[@human_trash_dot_jpeg]

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.

[@SteveGriffith-Prof3ssorSt3v3]

That topic is much bigger than any comment. State management can be very challenging and how you approach it depends on how the rest of your system is built. I have a video on pub-sub if that helps - kzbin.info/www/bejne/l6rRhIBuodGCeNU

[@user-rm4np9pw2h]

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

[@keshabheda4223]

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

[@SteveGriffith-Prof3ssorSt3v3]

Sorry this is the only video that I have made so far about event handling in web components.

[@SnakePliskin30]

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?

[@SteveGriffith-Prof3ssorSt3v3]

When you create functions inside a module, they are never added to the window object. they are accessible via the module object when you import the module. import * as mymodule from './module.js'; or const mymodule = import("./module.js"); both of the above would give you the module as an object and then you can access the name of a function inside the module via the mymodule variable name. That works if you don't know the name of the method inside the module. If you do know the function name, then call it like any function and the function can return what you want from inside the module / component.

[@SnakePliskin30]

@@SteveGriffith-Prof3ssorSt3v3 understood, thanks for the reply.

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

[@SteveGriffith-Prof3ssorSt3v3]

You CAN build a web component without a shadow DOM, but you lose out on functionality and the valuable encapsulation that really make components useful. If you are not using the shadow DOM then just write standard HTML and CSS.

[@netssrmrz]

@@SteveGriffith-Prof3ssorSt3v3 totally disagree. What functionality do you lose? Slots? Easy to reproduce. And your components become infinitely easier to customise.

[@ahmedsabryhussein201]

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

[@SteveGriffith-Prof3ssorSt3v3]

Not quite sure what you are asking but, the class that becomes the new HTML element is read and processed as its own module and then exposed to the web page as a valid bit of HTML before you can pass anything to it through attributes. In your html head you can load the script for the component as a module or in your main.js file you can import the module.

[@paulh6933]

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

[@SteveGriffith-Prof3ssorSt3v3]

Absolutely. In one of the other videos in this playlist I talked about using the disconnectedCallback() method in the component class. It is called when the component is removed from the page. You would use a standard removeEventListener call to delete the listener inside of disconnectedCallback().

[@tanu6011]

Web components playlist kzbin.info/aero/PLyuRouwmQCjnENQk6NJlckZRXOfQP0x5B

[@beinglawful]

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

[@SteveGriffith-Prof3ssorSt3v3]

There is no specific order for my videos. There are nearly 1000 videos. They are grouped into playlists by topic. Some videos appear in multiple playlists. Depending on the language or framework that you want to learn or the type of programming that you are doing you will want to use different playlists - www.youtube.com/@SteveGriffith-Prof3ssorSt3v3/playlists If you are new to web development then the HTML list is a first step. CSS will help you learn how to style the HTML. Then the two big JS lists - JS from the Start and JS in the Browser. JS from the Start is all about JS concepts separate from any specific server or client (browser) features. JS in the Browser is all client-side having to do with JS running in the browser. I would recommend watching the first 10 or 15 in order but after that, just pick topics that interest you. It will take years to get familiar with and practiced with everything. The best way to keep motivated is by picking the topics that interest you at the moment. Every tutorial will teach you something. Keep moving forward.

[@beinglawful]

@@SteveGriffith-Prof3ssorSt3v3 Thank you sir.