1
00:00:02,360 --> 00:00:10,520
So now that we got this open button working here, we got our basic, our very basic modal functionality

2
00:00:10,520 --> 00:00:11,750
in place.

3
00:00:11,960 --> 00:00:20,050
Now a next step that would be great is if we could customize the content of this modal a bit more.

4
00:00:20,120 --> 00:00:25,020
Right now we can pass in our own body, our own main content

5
00:00:25,370 --> 00:00:31,400
but what about the title, would be nice if we could pass in the title too and first setting the title,

6
00:00:31,400 --> 00:00:35,180
there are of course two possible routes we could take;

7
00:00:35,180 --> 00:00:41,890
one option would be to have like modal title attributes here which we can set.

8
00:00:41,960 --> 00:00:45,830
We could certainly do that and we could set this attribute here

9
00:00:45,830 --> 00:00:51,350
and then in modal.js in the connected callback which we don't have yet because we don't need it, we

10
00:00:51,350 --> 00:00:58,250
could add it of course, we could extract the that attribute and we could then initialize our h1 tag

11
00:00:58,280 --> 00:01:06,560
content here with the title we set up in our attribute and of course we could then also listen to

12
00:01:06,560 --> 00:01:08,660
changes in that title,

13
00:01:08,660 --> 00:01:14,570
so in that modal title attribute and possibly update it in the modal when that changes. There would be

14
00:01:14,570 --> 00:01:21,470
nothing wrong with that but I actually want to show you how to use multiple slots because maybe, we also

15
00:01:21,470 --> 00:01:27,430
have a modal where we don't want to force the user into using a h1 tag here,

16
00:01:27,590 --> 00:01:34,640
instead we want to let the user pass in any header the user wants and it could for example also be a

17
00:01:34,670 --> 00:01:37,330
h1 tag with an h2 tag below it,

18
00:01:37,340 --> 00:01:46,370
so to have a title and subtitle and for that, I want to use a slot here in my component too. The problem

19
00:01:46,370 --> 00:01:47,360
now of course is,

20
00:01:47,480 --> 00:01:48,970
I now got two slots right,

21
00:01:48,980 --> 00:01:51,950
I got one in the header and I got one in the main section.

22
00:01:51,950 --> 00:02:01,310
Now if we do that and we then go into the modal and we have let's say our h1 tag here, please confirm,

23
00:02:02,330 --> 00:02:10,050
if I do it like this and I reload this page and open the modal, then it might look right at first but

24
00:02:10,050 --> 00:02:16,650
if we inspect this, we actually see this is not really working out the way we want it to work, if we have

25
00:02:16,650 --> 00:02:19,580
a look at our modal, then in the header,

26
00:02:19,800 --> 00:02:27,930
well both is inserted - the paragraph and the h1 tag and the main section, there the slot basically is empty

27
00:02:28,470 --> 00:02:35,580
because what essentially happens here is that the first slot catches all the content we pass into the

28
00:02:35,580 --> 00:02:41,130
component and that makes a lot of sense because how would Javascript know

29
00:02:41,310 --> 00:02:46,390
which part here should end up in which of our slots.

30
00:02:46,560 --> 00:02:50,310
What we need is some kind of identification for each slot,

31
00:02:50,310 --> 00:02:57,180
some ID we assign to a slot which we then can use when we pass in some content to target a specific

32
00:02:57,180 --> 00:03:00,390
slot and we can actually do that,

33
00:03:00,390 --> 00:03:06,040
we can give our slots names and that is totally optional but something we can do

34
00:03:06,190 --> 00:03:10,320
and here I will give my slot a name by adding the name attribute,

35
00:03:10,340 --> 00:03:15,930
this is how you do assign names to slots and I'll name this title and down there,

36
00:03:15,930 --> 00:03:23,910
we now could give this a name of main or we leave it unnamed and then any content which we pass in, which

37
00:03:23,910 --> 00:03:27,990
does not target a specific name will automatically go in here.

38
00:03:27,990 --> 00:03:29,680
Now let me show you how this works.

39
00:03:29,850 --> 00:03:32,610
So we get this slot named title here,

40
00:03:32,610 --> 00:03:39,840
now back in the index.html file, the content which should go into my name slot will receive an

41
00:03:39,840 --> 00:03:45,000
extra slot attribute and there I simply point at the name,

42
00:03:45,000 --> 00:03:52,020
so in my case, title. So I use title here on the slot attribute of the content that should go into that

43
00:03:52,050 --> 00:03:56,130
title slot because I have title as a name here.

44
00:03:56,310 --> 00:04:02,940
The second slot has no name and therefore the content which has no slot attribute automatically goes

45
00:04:02,940 --> 00:04:05,030
to that default slot and

46
00:04:05,190 --> 00:04:08,610
I can show this to you if I now reload this page, here

47
00:04:09,030 --> 00:04:16,440
if we now inspect this, we see the header slot has the h1 tag and if I go into the main section, this

48
00:04:16,440 --> 00:04:24,180
slot has the paragraph tag and now we got a modal with more options for us to customize it because now

49
00:04:24,180 --> 00:04:27,710
we got multiple slots where we can pass in content

50
00:04:28,080 --> 00:04:32,890
and of course we can also still assign a default value here,

51
00:04:32,910 --> 00:04:38,850
so for example for this named slot just as we can do it for the unnamed slot, I will add a default content

52
00:04:38,850 --> 00:04:46,030
of please confirm payment in case we would not pass in content for this slot.

53
00:04:46,080 --> 00:04:47,370
Now in our case we do,

54
00:04:47,370 --> 00:04:52,560
so when I reload, we should still see please confirm instead of my default content of please confirm

55
00:04:52,560 --> 00:04:54,900
payment and indeed we do

56
00:04:54,900 --> 00:05:00,700
and now all the things you already learned apply. So we can now style this content which we do pass in

57
00:05:00,720 --> 00:05:02,870
from inside our main app

58
00:05:02,880 --> 00:05:10,160
so to say, from our main document, we can style that here in the light DOM or in our modal with the slotted

59
00:05:10,160 --> 00:05:12,290
special selector.

60
00:05:12,300 --> 00:05:18,780
So here, this style in particular has no effect anymore because we can't target the h1 tag that's passed

61
00:05:18,840 --> 00:05:21,090
into the shadow DOM from outside,

62
00:05:21,090 --> 00:05:26,820
if we would want to target anything that gets passed in, we would have to use the slotted attribute like

63
00:05:26,820 --> 00:05:27,650
this.

64
00:05:27,660 --> 00:05:36,810
So now here, I simply add my condition and say I want to style slotted h1's and now if I reload this, we have

65
00:05:36,810 --> 00:05:38,380
that smaller text here.

66
00:05:38,400 --> 00:05:40,350
So this is something we can still do,

67
00:05:40,380 --> 00:05:43,170
basically what you already learned about slots.