1 00:00:02,170 --> 00:00:08,900 Now there's one thing I want to do to conclude the styling part and there we'll use a relatively modern 2 00:00:08,960 --> 00:00:12,010 CSS feature, CSS variables. 3 00:00:12,170 --> 00:00:17,630 If you ever worked with Sass, you'll quickly know what CSS variables are, just that they're built into 4 00:00:17,630 --> 00:00:26,060 the core CSS functionality and don't require a development environment compiler as Sass does. 5 00:00:26,090 --> 00:00:28,910 So what's the idea behind CSS variables? 6 00:00:28,910 --> 00:00:32,040 Well we have all our nice stylings in our tooltip here, 7 00:00:32,060 --> 00:00:37,190 for example the background color when we have the important class on the host element. 8 00:00:37,190 --> 00:00:46,910 Now sometimes, you want to take advantage of the default styling your elements set up but you still want 9 00:00:46,910 --> 00:00:48,340 to customize it a bit, 10 00:00:48,380 --> 00:00:54,410 let's say the background color here, when we have that important flag, should depend on a certain theme 11 00:00:54,440 --> 00:00:56,340 we have in our application. 12 00:00:56,480 --> 00:01:02,420 Now obviously what we always can do is we can go into the style definitions of our light DOM and we 13 00:01:02,420 --> 00:01:06,250 could of course also say any tooltip, 14 00:01:06,320 --> 00:01:14,720 so we use our tooltip selector, with the important class receives a background of green. 15 00:01:14,920 --> 00:01:15,130 Okay 16 00:01:15,140 --> 00:01:20,350 we can always do that and if we go back and reload, we have that green color here. 17 00:01:20,350 --> 00:01:22,180 Now this does work, 18 00:01:22,250 --> 00:01:28,970 the problem with that just is we have to be totally aware of all the styles we set when the important 19 00:01:28,970 --> 00:01:30,590 class is added 20 00:01:30,590 --> 00:01:33,020 if we then want to override it as we do it here. 21 00:01:33,290 --> 00:01:39,050 Now here we know that the only thing we do with important inside of our custom element is that we set 22 00:01:39,050 --> 00:01:44,840 the background but we could be doing all kinds of things there and it would be very inconvenient if we 23 00:01:44,840 --> 00:01:51,590 as a developer had to drill into all the web components we're using to find out what they're doing when 24 00:01:51,590 --> 00:01:57,830 we add a certain CSS class and we might know that they do something when we add a class in general 25 00:01:57,860 --> 00:02:01,960 because we can find that in the documentation for the component let's say 26 00:02:02,180 --> 00:02:08,390 but we don't know all the styles this component is applying. What we do know, also because of the documentation 27 00:02:08,390 --> 00:02:15,260 for a component let's say, is that we can set a primary color and that the component will then use that 28 00:02:15,260 --> 00:02:21,350 primary color besides all other styles it might be setting which we don't want to touch and that is 29 00:02:21,350 --> 00:02:29,770 exactly where CSS variables or CSS properties can help us. We can go to our light DOM and 30 00:02:29,770 --> 00:02:40,060 instead of manually overriding our style here like this, we can add a CSS variable, typically you 31 00:02:40,060 --> 00:02:46,930 do that inside of these special root selector which simply is like the root of your document, 32 00:02:46,930 --> 00:02:53,920 alternatively you could select HTML here in the HTML document and in there, you can add your 33 00:02:53,920 --> 00:03:01,520 own custom variable with two dashes at the beginning and then any name you want, something like 34 00:03:01,520 --> 00:03:08,510 color-primary and there let's give this a light blue maybe, let's see, 35 00:03:08,510 --> 00:03:15,180 let's pick this one and now we just need to make sure that we use that in a component 36 00:03:15,180 --> 00:03:17,790 and in reality it probably is the other way around, 37 00:03:17,790 --> 00:03:23,550 you are using a web component in your application and in the documentation of that web component, you 38 00:03:23,550 --> 00:03:31,080 find the information that this component is able to read the color-primary CSS variable let's 39 00:03:31,080 --> 00:03:31,760 say 40 00:03:31,920 --> 00:03:37,840 and therefore when you set it in your light DOM, the tooltip can pick it up because in there, we just happen 41 00:03:37,840 --> 00:03:38,550 to use that. 42 00:03:39,030 --> 00:03:45,000 So instead of hardcoding the light gray here, we can use that variable and we do this with the special 43 00:03:45,030 --> 00:03:48,470 var function which CSS understands 44 00:03:48,690 --> 00:03:51,240 and there we now just have to use the same name, 45 00:03:51,270 --> 00:04:00,060 so --color-primary. If we do that and we save this, we can go back and reload and we now see this 46 00:04:00,060 --> 00:04:06,120 light blue style here as a background but now this is fully customizable from inside the light DOM 47 00:04:06,600 --> 00:04:13,620 without us being required to dig into the internals of our component and manually override that, 48 00:04:13,620 --> 00:04:18,480 instead we can simply change the color into light DOM, in this variable and it will be picked up by the 49 00:04:18,480 --> 00:04:23,410 styling inside of our component due to the way we use this CSS variable. 50 00:04:23,450 --> 00:04:28,710 And if you want to learn more about CSS variables and CSS in general, don't hesitate to take 51 00:04:28,710 --> 00:04:34,590 my CSS - The Complete Guide course of course, this is a really neat feature when you want to implement 52 00:04:34,590 --> 00:04:41,700 something like theming or dynamic colors which you can set from outside. You are not restricted to colors 53 00:04:41,730 --> 00:04:43,820 by the way, you can pass anything, 54 00:04:43,890 --> 00:04:50,830 you could also have variables where you set some font sizes or padding dimensions, so pixels, rems, 55 00:04:50,910 --> 00:04:58,050 this is all possible and you can find an article with more information on CSS properties or variables 56 00:04:58,230 --> 00:04:59,290 as I called them here 57 00:04:59,370 --> 00:05:04,560 attached to this lecture by the way in case you want to dive deeper, learn more about them and learn 58 00:05:04,560 --> 00:05:11,740 more about the browser support for this feature and so on. This now gives us full functionality though 59 00:05:12,070 --> 00:05:16,490 and is an awesome way of enhancing our component. 60 00:05:16,490 --> 00:05:19,650 There's just one other thing we can do here to make it even better, 61 00:05:19,780 --> 00:05:26,170 in cases where a color-primary is not set, let's say I'm not setting it here, I'm commenting it out in 62 00:05:26,170 --> 00:05:27,380 the light DOM, 63 00:05:27,550 --> 00:05:32,860 in such cases we of course have no background color because we're trying to apply this variable here 64 00:05:33,100 --> 00:05:40,210 but this variable does not exist, so we can't extract the value from it. To handle such cases, 65 00:05:40,300 --> 00:05:44,600 we can set up a default value in the place where we try to access the variable, 66 00:05:44,680 --> 00:05:51,820 so in our custom component. We simply add a comma after the variable name we're looking for and then 67 00:05:51,820 --> 00:05:54,520 we provide a fallback value, like this light 68 00:05:54,520 --> 00:05:55,410 gray 69 00:05:55,540 --> 00:06:00,360 and if we do that like this, now if I reload we have that light gray 70 00:06:00,640 --> 00:06:07,560 but if I were to override this in the light DOM by defining that variable the component is looking for, 71 00:06:07,750 --> 00:06:11,570 if we do that, then this of course gets picked up. 72 00:06:11,590 --> 00:06:18,010 So now we have the highest amount of flexibility we could possibly have for this styling thing.