1
00:00:02,510 --> 00:00:05,970
Now to conclude the special selectors we learned about,

2
00:00:06,050 --> 00:00:13,220
there's one other special selector that is worth pointing out and that is the host context selector.

3
00:00:13,220 --> 00:00:16,670
Now let's say, and that is actually the case here,

4
00:00:16,670 --> 00:00:24,200
we only want to apply a certain style to our custom element when it is inside of a paragraph

5
00:00:24,290 --> 00:00:29,120
as our first tooltip is right, here our first tooltip is inside of a paragraph,

6
00:00:29,120 --> 00:00:30,850
the second one is not.

7
00:00:31,400 --> 00:00:34,630
So in this case, we might want to set a certain style

8
00:00:34,880 --> 00:00:40,990
and for that there is another special selector :host-context.

9
00:00:41,240 --> 00:00:47,990
This also has this function form with parentheses after the selector and in the function arguments

10
00:00:47,990 --> 00:00:48,350
here,

11
00:00:48,410 --> 00:00:54,700
so between the parentheses, you specify the surrounding conditions you want to have around your element.

12
00:00:55,310 --> 00:00:58,680
So in this case, we could add the p selector,

13
00:00:58,700 --> 00:01:04,340
so the tag selector for a paragraph element but you could also have something like it should be a paragraph

14
00:01:04,340 --> 00:01:11,480
with the hello class like this or a paragraph with a nested element of Hello which surrounds our custom

15
00:01:11,480 --> 00:01:13,570
element. All is possible,

16
00:01:13,640 --> 00:01:21,440
here I'll just go for p and if that is the case let's say, then we want to have a font-weight that is bold,

17
00:01:21,470 --> 00:01:25,460
so we want to have bold text. Now if we do that and we reload,

18
00:01:25,460 --> 00:01:31,730
we see for the first web component, we have bold text, for the second we don't and we have that because of

19
00:01:31,790 --> 00:01:38,690
this rule which kicks in due to our paragraph around our custom element and for the second web component,

20
00:01:38,690 --> 00:01:43,940
for our second tooltip, this rule does simply not apply because there is no paragraph around it

21
00:01:44,240 --> 00:01:46,580
and if we would nest is inside of a paragraph,

22
00:01:46,580 --> 00:01:49,800
so if I would move it here and you can drag it in the developer tools,

23
00:01:49,850 --> 00:01:55,610
so if I drag it here into my paragraph, you see this gets built too because it's now also inside

24
00:01:55,610 --> 00:01:57,350
of a paragraph and hence

25
00:01:57,350 --> 00:02:02,810
now this host context here also applies. If I move it out of there again,

26
00:02:02,810 --> 00:02:05,480
then again it's not bold anymore.

27
00:02:05,480 --> 00:02:07,600
So this is really cool,

28
00:02:07,640 --> 00:02:14,510
gives us a lot of flexibility here and with host, host in combination with this function form to set

29
00:02:14,510 --> 00:02:19,070
conditions, host context and slotted,

30
00:02:19,070 --> 00:02:25,130
you have a lot of powerful tools to style the content in your web components in exactly the way you

31
00:02:25,130 --> 00:02:25,520
want.