1
00:00:02,280 --> 00:00:07,130
Now let's work a bit on the styling and the thing which I explained in the last lecture,

2
00:00:07,170 --> 00:00:15,460
the fact that our slotted content is not actually part of the shadow DOM has one important implication.

3
00:00:15,540 --> 00:00:20,210
If we go back to our old code, I'm talking about these web components texts here of course,

4
00:00:20,280 --> 00:00:24,560
it's not part of the shadow DOM as I now mentioned multiple times.

5
00:00:24,600 --> 00:00:32,550
This means that I can style this through the light DOM, so through the styles set up in the light DOM and I want

6
00:00:32,550 --> 00:00:36,150
to do exactly that right now, just format this a little bit

7
00:00:36,150 --> 00:00:40,250
and now here to make it really clear that I can style it from outside,

8
00:00:40,320 --> 00:00:48,510
I'll wrap this in a span, simply so that I have a tag, a selector which I can use in my light DOM CSS

9
00:00:49,020 --> 00:00:54,870
and I will give this a class of let's say highlight. Let's say this is a class we have in our default page

10
00:00:54,980 --> 00:00:55,790
styles,

11
00:00:55,890 --> 00:01:03,330
in this case here I have my highlight class selector and again, really important to recognize that this

12
00:01:03,330 --> 00:01:05,610
is now all happening in the light DOM,

13
00:01:05,670 --> 00:01:08,660
this is not the scoped styling in the web component,

14
00:01:08,730 --> 00:01:15,060
it's our normal styling in our normal page and that could of course also be done in an external CSS

15
00:01:15,060 --> 00:01:20,970
file and let's say for the highlight style here,

16
00:01:20,970 --> 00:01:30,750
I typically assign a background color of yellow, maybe not this yellow but maybe like a light lime yellow

17
00:01:30,750 --> 00:01:37,170
here, like this or actually so that you can see it a bit better,

18
00:01:37,440 --> 00:01:43,680
let me go with a light orange, I guess that's a bit easier to see. Now when I save that and I reload

19
00:01:43,680 --> 00:01:51,690
this page, you see that this is getting this light orange background and again, this is not some styling

20
00:01:51,690 --> 00:01:57,060
set up in the web component, it is general styling setup in my HTML page

21
00:01:57,060 --> 00:02:00,150
and again this could also be in an external style file.

22
00:02:00,750 --> 00:02:08,880
So my styles here still apply because this span here which holds my text is part of a light DOM, not

23
00:02:08,940 --> 00:02:15,210
the shadow DOM and I can make this even clearer if I dive into my tooltip and there into the styling

24
00:02:15,210 --> 00:02:17,630
for the shadow DOM and there,

25
00:02:17,640 --> 00:02:24,300
let me also add a highlight class selector, now in the styles of the shadow DOM and let me give this

26
00:02:24,390 --> 00:02:27,000
a background of red.

27
00:02:27,660 --> 00:02:33,310
So here, I have a background color, so let's make this equal even though it would make it different

28
00:02:33,420 --> 00:02:39,090
but now a background color of this light orange in the light DOM and a background color of red in the

29
00:02:39,090 --> 00:02:40,230
shadow DOM

30
00:02:40,410 --> 00:02:46,080
and please be aware or see that this is the exact same CSS selector,

31
00:02:46,110 --> 00:02:48,190
so we have a class selector here too

32
00:02:48,300 --> 00:02:49,410
in the shadow DOM.

33
00:02:49,680 --> 00:02:54,110
And now if I reload my page here, we still have the orange style

34
00:02:54,270 --> 00:02:59,880
and if we inspect this span here and we have a look at how the styling gets applied, we see there also

35
00:02:59,970 --> 00:03:04,520
is no other styling getting applied except for this orange background color,

36
00:03:04,680 --> 00:03:11,190
so it's not like this would be overriding the shadow DOM styles, the shadow DOM style simply don't matter

37
00:03:11,190 --> 00:03:17,220
here because it is not part of the shadow DOM and I'm just emphasizing this because this is so important

38
00:03:17,220 --> 00:03:20,580
and has an important implication for styling.

39
00:03:20,580 --> 00:03:27,870
Now of course though, you could have the use case that you do want to style your slotted content from

40
00:03:27,870 --> 00:03:34,350
inside the shadow DOM because you might be creating a web component that should very well set up some

41
00:03:34,350 --> 00:03:37,500
default styling for the projected content,

42
00:03:37,500 --> 00:03:42,360
so for the content that's passed into slots and how could you solve that then?