1 00:00:02,250 --> 00:00:03,630 Now that's all nice 2 00:00:03,630 --> 00:00:04,940 what we're doing here 3 00:00:05,010 --> 00:00:09,750 but what if I want to style my overall custom element? 4 00:00:09,750 --> 00:00:12,060 Thus far I'm styling the slotted content 5 00:00:12,570 --> 00:00:16,940 and we could of course also style our question mark here. 6 00:00:16,980 --> 00:00:22,830 So in the tooltip, we could of course also assign some styles to this span here, 7 00:00:22,920 --> 00:00:29,010 we could give this a class of let's say icon here and then obviously no one is stopping us from giving 8 00:00:29,010 --> 00:00:40,440 the icon some styling here let's say a background color of black, a text color of white, some padding here 9 00:00:43,640 --> 00:00:48,510 of .25rem for example, text align center, 10 00:00:48,640 --> 00:00:53,620 anything like that and if I reload, we would have that style here, 11 00:00:55,060 --> 00:01:03,990 let's maybe also give it a border radius of 50% and now we would have that style. We can maybe now 12 00:01:03,990 --> 00:01:08,950 also get rid of that whitespace at the beginning and the parentheses 13 00:01:08,970 --> 00:01:12,000 so that we have this more iconish look here, 14 00:01:12,000 --> 00:01:23,540 let's increase the padding to left and right, 2.5rem maybe and shrink that to 1.5, something like that 15 00:01:24,320 --> 00:01:26,810 and then we would have this icon look here. 16 00:01:26,810 --> 00:01:35,140 Now this is something we can do but what if I want to style the overall component from outside my 17 00:01:35,880 --> 00:01:36,340 element, 18 00:01:36,340 --> 00:01:44,050 so from the light DOM? I can simply use my tag selector or any class I add on to my or ID I add onto 19 00:01:44,050 --> 00:01:47,440 my element because, that is really important to understand, 20 00:01:47,500 --> 00:01:52,990 you can use your custom element, just as you use the built-in elements, so you can add an ID, you can 21 00:01:53,080 --> 00:01:59,160 add classes or as I just said, you can use its tag name here as a selector, just as you can do it with 22 00:01:59,160 --> 00:02:03,820 a div. We can add the uc-tooltip here in our styling 23 00:02:03,820 --> 00:02:07,150 and of course there we could give this some style. 24 00:02:07,150 --> 00:02:09,670 Now which style do we want to assign here? 25 00:02:09,670 --> 00:02:12,140 Let's take one that we can clearly see, 26 00:02:12,190 --> 00:02:22,740 I will give it a border of one pixel solid and blue and maybe padding of 0.15rem, if we now go 27 00:02:22,740 --> 00:02:24,450 back and we reload, 28 00:02:24,450 --> 00:02:30,570 we see that we do have that styling for all our tooltip-ish components here. 29 00:02:30,600 --> 00:02:35,880 Now we're probably not going to win a style price here but it is important to understand that this is 30 00:02:35,880 --> 00:02:38,420 something you can do. 31 00:02:38,590 --> 00:02:44,740 Now I will at this point by the way also comment out my background color for the highlight so that it 32 00:02:44,740 --> 00:02:46,990 looks a bit less messy 33 00:02:46,990 --> 00:02:50,990 and now we just have that blue border around our overall component 34 00:02:51,220 --> 00:02:57,320 and this of course is something you could definitely want, that you style your custom element as a whole. 35 00:02:57,320 --> 00:03:02,380 Now sometimes just as with the slotted content, you don't want to do that from outside, 36 00:03:02,380 --> 00:03:09,490 so from our light DOM styling but you want to set up a default styling for your element inside your 37 00:03:09,580 --> 00:03:10,680 custom element 38 00:03:10,810 --> 00:03:16,810 and just as with the slotted content, the light DOM will always override that but still in cases where 39 00:03:16,810 --> 00:03:21,730 you don't set up a default style in the light DOM, you want to do that from inside the shadow DOM, from 40 00:03:21,730 --> 00:03:23,540 inside your element. 41 00:03:23,590 --> 00:03:26,770 So let's switch to our tooltip here and there, 42 00:03:26,800 --> 00:03:29,320 let's make sure we can style our element. 43 00:03:29,380 --> 00:03:39,010 The problem just is in here, we can't use the selector because this style simply styles our shadow 44 00:03:39,010 --> 00:03:46,670 DOM template and in that template, we got a slot and a span but we certainly don't have our own tag 45 00:03:46,670 --> 00:03:55,060 in there. Instead in here, we have a special selector, the colon, one colon only by the way, host selector 46 00:03:55,750 --> 00:03:57,790 and this host selector 47 00:03:57,880 --> 00:04:02,530 now allows you to style your element here, 48 00:04:02,530 --> 00:04:10,130 for example here we could now give this a background of light gray. If I now go back and I reload here, 49 00:04:10,130 --> 00:04:13,660 we see that background on all our elements here 50 00:04:14,450 --> 00:04:21,230 and again if we have a look at this in our developer tools, we see this is the style we just added and it 51 00:04:21,230 --> 00:04:25,130 would be overridden by any clashing styles we have in a light DOM. 52 00:04:25,130 --> 00:04:32,780 So just as with the slotted content, the light DOM wins but with host, we can set up default styling for our 53 00:04:32,780 --> 00:04:34,970 custom elements from inside them 54 00:04:34,970 --> 00:04:36,920 and that of course is a use case 55 00:04:36,920 --> 00:04:40,130 you typically also have a lot when creating your own web components.