1
00:00:02,250 --> 00:00:09,720
To act when we add this opened attribute, we need to listen to changes in attributes obviously and you

2
00:00:09,720 --> 00:00:11,760
learned how that works right.

3
00:00:11,760 --> 00:00:14,430
Thus far we have all the logic in the constructor,

4
00:00:14,430 --> 00:00:23,250
now it's simply time to add more methods here and I will add the attribute changed callback here and

5
00:00:23,250 --> 00:00:28,950
you remember that you here get the name of the attribute which changed, the old value and the new value

6
00:00:29,310 --> 00:00:33,330
and then this will trigger for any observed attribute which changed.

7
00:00:33,330 --> 00:00:41,160
For this we also have to add our static getter here, observed attributes, and make sure you get the

8
00:00:41,160 --> 00:00:42,150
naming right here

9
00:00:42,180 --> 00:00:43,910
otherwise it will not work

10
00:00:44,280 --> 00:00:50,040
and there you have to return square brackets and then the name of the attributes you want to watch

11
00:00:50,040 --> 00:00:51,970
and here it's the opened attribute

12
00:00:52,080 --> 00:00:57,630
and if you chose a different name, that will be added here outside of your component,

13
00:00:57,630 --> 00:01:01,380
then you also have to listen to a different name in here of course.

14
00:01:01,380 --> 00:01:05,370
Now for the addition of the opened attribute, this should be triggered

15
00:01:05,370 --> 00:01:09,530
and then when this runs, maybe we also have other attributes,

16
00:01:09,540 --> 00:01:16,610
so here I will check if name is equal to opened and if that is the case, we know that something happened

17
00:01:16,610 --> 00:01:17,970
on the opened attribute

18
00:01:18,080 --> 00:01:26,750
so we probably want to show our modal but I can simply add another if check and see if this has an attribute

19
00:01:26,810 --> 00:01:27,410
of opened

20
00:01:27,440 --> 00:01:34,160
now because if that is now available, then we know it has been added and then I know I want to change the

21
00:01:34,160 --> 00:01:39,880
styling to set the opacity to 1 and to set pointer events to all,

22
00:01:39,890 --> 00:01:43,650
so to react to clicks on my backdrop and my modal again

23
00:01:44,810 --> 00:01:46,900
and there are a couple of ways of doing that.

24
00:01:46,930 --> 00:01:59,360
One thing we can do is we can access our shadow root and there of course, query for our backdrop and

25
00:01:59,360 --> 00:02:01,720
set the style of the backdrop

26
00:02:01,730 --> 00:02:09,860
and here, simply add opacity or set opacity to 1 and then also the style of the backdrop pointer events

27
00:02:10,490 --> 00:02:15,830
should be set to all, to react to all clicks on the backdrop

28
00:02:15,830 --> 00:02:18,240
and then we do exactly the same here

29
00:02:19,400 --> 00:02:21,350
for our modal.

30
00:02:21,410 --> 00:02:26,840
So there we also set the opacity to 1 and the pointer events to all

31
00:02:26,970 --> 00:02:31,890
and if you save that and you reload that page and you click that button,

32
00:02:31,920 --> 00:02:37,710
indeed both shows up here and now we can't click this button here anymore because the pointer events

33
00:02:37,800 --> 00:02:38,670
are on,

34
00:02:38,670 --> 00:02:42,600
we now catch any clicks with the backdrop and with the modal.

35
00:02:42,600 --> 00:02:44,720
This is one possible way of doing this,

36
00:02:44,730 --> 00:02:49,980
there are other possible ways too but I will actually comment this out.

37
00:02:49,980 --> 00:02:56,970
It might seem like the obvious way of reacting to the opened attribute but if all you want to do is

38
00:02:56,970 --> 00:03:05,110
change some styling, then there is a way easier approach to do that, to get there.

39
00:03:05,190 --> 00:03:10,280
You don't need attribute changed callback for that, you don't need to listen to these changes

40
00:03:10,290 --> 00:03:13,380
even, so I will comment all of that out,

41
00:03:13,410 --> 00:03:18,180
it's nice knowing that and you would need that if you had any other logic you wanted to execute, like

42
00:03:18,270 --> 00:03:24,600
start a timer, change some text, add an element but if you just want to change some styles, you can do

43
00:03:24,600 --> 00:03:33,090
that with CSS only because what happens when the opened attribute is added to our tag here?

44
00:03:33,180 --> 00:03:35,720
Well then it looks like this here right,

45
00:03:35,730 --> 00:03:43,470
our tag and then the opened attribute and you might remember that in CSS, there are attributes selectors.

46
00:03:43,770 --> 00:03:50,580
So we can simply write a CSS rule that changes the style when the opened attribute is available

47
00:03:50,700 --> 00:03:54,420
on our root element, on our host element.

48
00:03:54,450 --> 00:04:03,890
So what I'll do is I'll add a new rule here, :host, with the condition that the opened attribute is

49
00:04:03,890 --> 00:04:10,160
there and this is all I need to write for this, this now means for the host element, which is our custom tag,

50
00:04:10,580 --> 00:04:17,210
when the opened attribute is available and this is the normal attribute syntax you know from CSS, then

51
00:04:17,210 --> 00:04:22,730
I want to change the style and I want to change the style of my backdrop, so I can still combine these

52
00:04:22,730 --> 00:04:25,820
selectors and this just means select the backdrop

53
00:04:25,970 --> 00:04:32,660
if my host has the opened attribute and then I want to set the opacity to 1 and I want to set pointer

54
00:04:32,660 --> 00:04:33,950
events to all

55
00:04:36,770 --> 00:04:47,750
and I can now of course do the same for my modal by simply repeating this with #modal. And with

56
00:04:47,750 --> 00:04:54,050
this change in place, please keep in mind that I commented out my attributes changed callback, so with this

57
00:04:54,050 --> 00:05:01,010
change in place up here, we can go back and reload our page and still click that button and see the modal

58
00:05:01,010 --> 00:05:05,280
and the backdrop and this is now the more elegant way of solving this

59
00:05:05,330 --> 00:05:12,230
if you only need to change styles. If you needed to do anything else, like add an HTML element, then

60
00:05:12,230 --> 00:05:18,620
of course you would need to listen to that and then run whichever logic, add whichever element you want

61
00:05:18,620 --> 00:05:21,110
to add in your attributes changed callback.