1 00:00:02,140 --> 00:00:08,080 So it would be really great if we could listen to our own event from outside our component and not just 2 00:00:08,080 --> 00:00:11,260 from inside because that kind of defeats its purpose, right? 3 00:00:12,100 --> 00:00:19,420 Well the good thing is when you create such an event, we can specify an object as a second argument where 4 00:00:19,420 --> 00:00:25,240 we can add some information about how this event should behave 5 00:00:25,240 --> 00:00:29,210 and there, we basically got three configurations. 6 00:00:29,440 --> 00:00:32,870 Bubbles allows us to define whatever this event should bubble up or not, 7 00:00:32,890 --> 00:00:38,560 this means if it should only be available on the element we dispatched it on or if it is not handled 8 00:00:38,560 --> 00:00:39,120 there, 9 00:00:39,190 --> 00:00:42,660 if it should go to the next element in the DOM tree. 10 00:00:42,670 --> 00:00:48,820 So in our case, for this button, the cancel button, if we don't add an event listener there, it would bubble 11 00:00:48,820 --> 00:00:51,770 up and event listeners on the section would handle it 12 00:00:51,880 --> 00:00:57,100 and if we had no event listeners there, it would bubble up and event listeners on this div would handle 13 00:00:57,100 --> 00:00:57,640 it 14 00:00:57,760 --> 00:01:00,610 and if we have no listeners there, it would bubble up and so on. 15 00:01:00,610 --> 00:01:02,380 So this doesn't sound too bad, right? 16 00:01:02,380 --> 00:01:09,320 If I set this to true, let's see, now theoretically we should be able to listen to it from other places 17 00:01:09,320 --> 00:01:12,690 too and not just on event listeners on this button. 18 00:01:12,740 --> 00:01:19,150 So maybe now our event listener on our custom component, which in the end wraps this button, works. 19 00:01:19,340 --> 00:01:24,610 So let's go back and reload and click cancel, 20 00:01:24,610 --> 00:01:26,220 still no output. 21 00:01:26,350 --> 00:01:31,990 The reason for that is that there is another important argument and that is the composed arguments here. 22 00:01:32,710 --> 00:01:35,480 Composed when set to true 23 00:01:35,590 --> 00:01:38,700 now suddenly ensures that this will work, 24 00:01:38,860 --> 00:01:45,070 if I now click cancel, you see cancel here and the reason for that is that composed, which by default 25 00:01:45,070 --> 00:01:45,640 is false 26 00:01:45,640 --> 00:01:54,160 just like bubbles, composed means that if you set it to true, then this event may leave the shadow DOM 27 00:01:54,550 --> 00:01:56,380 in which it is, if it is in one 28 00:01:56,500 --> 00:01:59,790 and here of course, it is triggered inside of our shadow DOM. 29 00:01:59,950 --> 00:02:06,060 If you set composed to false, then the event must not leave our shadow DOM tree, 30 00:02:06,220 --> 00:02:09,580 so it will bubble up but only inside our shadow DOM tree, 31 00:02:09,670 --> 00:02:14,770 so we could add a listener to modal and handle it but not outside of our component. 32 00:02:14,770 --> 00:02:22,880 So we need to set both to true, bubbles and composed, to handle our event outside of our component 33 00:02:22,880 --> 00:02:25,230 and now we can listen to it. 34 00:02:25,300 --> 00:02:27,330 Now this is one way of doing that, 35 00:02:27,370 --> 00:02:32,800 of course there is a simpler way too, I just show you this way because sometimes you need to take that 36 00:02:32,800 --> 00:02:33,520 route, 37 00:02:33,670 --> 00:02:37,840 but of course for confirm and we could have done that for cancel too, 38 00:02:37,840 --> 00:02:42,130 we can also just refer to this, which is our component, 39 00:02:42,130 --> 00:02:48,730 so our own custom element in the end, remember our modal extends the HTML element, 40 00:02:48,760 --> 00:02:56,290 so this really refers to our own custom HTML element in the end and therefore our custom element 41 00:02:56,290 --> 00:03:00,110 itself also has the dispatch event method. 42 00:03:00,130 --> 00:03:08,340 So here, our confirm event can also be holding a new event, here the confirm event, 43 00:03:08,350 --> 00:03:12,580 so the name is confirm and you can pick any name you want but of course it should match the name we 44 00:03:12,580 --> 00:03:18,120 are listening to outside and then here, I will use this confirm event and 45 00:03:19,330 --> 00:03:28,390 now if I save this without any extra config and I click okay, we still get confirmed because now 46 00:03:28,390 --> 00:03:31,390 we're triggering this event on our element itself, 47 00:03:31,390 --> 00:03:37,600 so not inside the shadow DOM, not on some nested element in the shadow DOM but on our custom element 48 00:03:37,600 --> 00:03:43,210 itself and therefore listeners on our element will of course receive that event. 49 00:03:43,210 --> 00:03:45,550 It will not bubble up there now though, 50 00:03:45,550 --> 00:03:50,380 so if we would want to listen to it on the body in our main document, this should not work 51 00:03:50,380 --> 00:03:58,110 but we also don't need to manage composed and so on because this is now simply not required. 52 00:03:58,220 --> 00:04:03,000 So this is of course the shorter alternative and the one you would typically use 53 00:04:03,170 --> 00:04:09,530 but I found it important to mention how you can use bubbles and composed to also let events triggered 54 00:04:09,530 --> 00:04:16,550 inside your shadow DOM, on some nested element, bubbles up through the shadow DOM and potentially even 55 00:04:16,700 --> 00:04:18,590 leave it with composed. 56 00:04:18,590 --> 00:04:21,460 So these are the custom events and how we can handle it 57 00:04:21,620 --> 00:04:25,460 and now we have the full flexibility we might need, 58 00:04:25,460 --> 00:04:31,040 we're closing the modal and in our main application, which we typically would run or import in our main 59 00:04:31,040 --> 00:04:37,340 document, like this index.html file, there we can now also find out which button the user pressed 60 00:04:37,820 --> 00:04:44,870 without having to kind of dig into our component and try to attach listeners to the buttons in the component 61 00:04:44,870 --> 00:04:46,030 from outside, 62 00:04:46,100 --> 00:04:50,660 instead we use these convenient listeners on our custom element itself.