1
00:00:02,310 --> 00:00:09,420
Now let's take what we learned in the last lectures one step further. What if we want to apply a default

2
00:00:09,420 --> 00:00:19,870
style from inside our component but only if some condition is true on our custom element?

3
00:00:19,890 --> 00:00:27,320
Let me give you an example. Let's say on this first tooltip here, we added a class, we might have done

4
00:00:27,320 --> 00:00:34,910
this right from the start when we wrote our HTML document or maybe we did this programmatically when

5
00:00:34,910 --> 00:00:41,290
our app runs, a user clicks a button and we add a class to this element, as we can do it with any HTML

6
00:00:41,520 --> 00:00:42,580
element.

7
00:00:42,710 --> 00:00:45,310
The class here is maybe important,

8
00:00:45,320 --> 00:00:46,580
the name does not matter,

9
00:00:46,580 --> 00:00:51,360
let's say we added the important CSS class to our custom element.

10
00:00:51,390 --> 00:00:56,710
Now we only want to set a background color on our custom element

11
00:00:56,760 --> 00:01:05,770
if that important class was set. Now what you can't do is you can't say :host.important,

12
00:01:05,770 --> 00:01:10,450
this might be something you would think that works because that is how you'd normally combine multiple

13
00:01:10,450 --> 00:01:14,830
selectors together in one rule if they all have to match simultaneously

14
00:01:14,830 --> 00:01:18,720
but here if we reload, this actually has no effect

15
00:01:18,730 --> 00:01:25,750
as you can see, on our custom element, we now don't have any styling from inside our web component.

16
00:01:25,750 --> 00:01:27,480
So this does not work,

17
00:01:27,490 --> 00:01:31,300
instead :host is also used as a function

18
00:01:31,300 --> 00:01:38,910
if you have some condition for it. So you then simply wrap your condition, so the other CSS selectors

19
00:01:38,920 --> 00:01:41,020
that should be matching on your host element,

20
00:01:41,140 --> 00:01:49,840
so on your custom tag and you add all these required selectors, the required conditions in parentheses

21
00:01:49,840 --> 00:01:55,180
here and you can have anything in there, you can have an attribute selector in there, a class selector

22
00:01:55,180 --> 00:02:00,360
as we have it here, an ID selector, any kind of combinations.

23
00:02:00,400 --> 00:02:06,820
Now with this syntax, with host with the condition of also having the important class,

24
00:02:06,820 --> 00:02:13,480
now with that, we get back this gray-ish background but only on the first web component here, not on our

25
00:02:13,480 --> 00:02:20,080
second one because we now require the presence of this important class and this is simply not the case

26
00:02:20,410 --> 00:02:23,650
on this second component. On the first one, it is

27
00:02:23,920 --> 00:02:30,790
and in this style inspector here, we indeed see this is responsible for setting this gray background

28
00:02:31,000 --> 00:02:38,200
and this is our host rule with the condition of also having the important CSS class on our custom

29
00:02:38,200 --> 00:02:38,960
element.

30
00:02:39,010 --> 00:02:46,780
So that is another, very important variant of host that allows us to style things with way more flexibility.