1
00:00:02,570 --> 00:00:09,800
Well if you want to style slotted content, there is a special selector you can use inside your web component,

2
00:00:09,810 --> 00:00:19,860
so inside your shadow DOM styling and that is a special pseudo selector, ::slotted. This will select

3
00:00:19,970 --> 00:00:28,250
all slotted content and the way it works is that you call this like a function here is CSS and to it,

4
00:00:28,460 --> 00:00:31,890
you pass the selector of the slotted content,

5
00:00:31,940 --> 00:00:38,630
so now you could say I want to select all slotted content that has the highlight class or all slotted

6
00:00:38,630 --> 00:00:43,030
content that is a span or an anchor tag, so anything like that.

7
00:00:43,100 --> 00:00:48,200
Important though, you can only select the slotted content itself,

8
00:00:48,200 --> 00:00:55,580
so if for example in my slotted content here in this span, I also had an anchor tag in there,

9
00:00:55,580 --> 00:01:03,770
then what you could not do, you could not select slotted and then the span, this would still work because

10
00:01:03,770 --> 00:01:10,310
the slotted content is the span but you can select a child element in the top level slotted content.

11
00:01:10,310 --> 00:01:15,990
So this would not style the anchor tag in your slotted span because you can only select the topmost

12
00:01:16,040 --> 00:01:17,260
element for styling,

13
00:01:17,270 --> 00:01:20,370
this is an important restriction you have here.

14
00:01:20,420 --> 00:01:26,300
So if you have nested content, you can't select this but you can select a span or since this is also

15
00:01:26,300 --> 00:01:29,170
directly on the slotted content in our case here,

16
00:01:29,190 --> 00:01:38,540
the highlight class and then here, what we could do is we could give us a border bottom of one pixel

17
00:01:39,310 --> 00:01:48,260
dotted and red for example, save that and go back and reload this page and you will see this slight

18
00:01:48,380 --> 00:01:50,270
red border here

19
00:01:50,480 --> 00:01:52,340
and if I inspect this again,

20
00:01:52,340 --> 00:01:55,210
you see here is our styling getting applied,

21
00:01:55,310 --> 00:01:58,610
the border bottom is having an effect here.

22
00:01:58,790 --> 00:02:02,270
Still important to highlight the order of the styles here,

23
00:02:02,480 --> 00:02:09,290
the styling you set up in the light DOM will override your slotted styling you set up in the shadow

24
00:02:09,290 --> 00:02:09,650
DOM

25
00:02:10,100 --> 00:02:15,560
and the idea here simply is that you always want to give the user the final say on how things should

26
00:02:15,560 --> 00:02:21,820
look like but you can set up some default styling you want to have as we do it here

27
00:02:22,010 --> 00:02:25,850
but if we were to set a border bottom in the light DOM too,

28
00:02:25,910 --> 00:02:31,310
so in our case for the highlight class, if I had a border bottom of let's say two pixels solid and

29
00:02:31,310 --> 00:02:37,700
blue here, then you would see that if we reload this page, we see that border instead of our red dotted

30
00:02:37,700 --> 00:02:42,400
border because whilst this rule still gets applied, it gets overriden here.

31
00:02:42,410 --> 00:02:51,020
So the specificity in CSS is such that light DOM styling overrides shadow DOM styling for projected

32
00:02:51,050 --> 00:02:54,210
or slotted content.

33
00:02:54,380 --> 00:02:56,070
This is just one thing to be aware of,

34
00:02:56,090 --> 00:02:59,960
I will comment this out here in the light DOM because I don't want to override this,

35
00:02:59,990 --> 00:03:04,880
I want to have my red dotted border but it is something you definitely have to be aware of,

36
00:03:04,910 --> 00:03:07,710
this can be overriden from inside the light

37
00:03:07,710 --> 00:03:08,060
DOM.