1
00:00:02,510 --> 00:00:08,480
It's all nice that we have some functionality in our web component but it would now be nice to work

2
00:00:08,480 --> 00:00:14,330
on the styling, for example that this tooltip does not kind of split our line here

3
00:00:14,480 --> 00:00:20,840
but it should be like an overlay being positioned next or near to our question mark here.

4
00:00:20,900 --> 00:00:23,990
So how can we achieve this?

5
00:00:23,990 --> 00:00:31,350
Well since we are creating our tooltip container here, we can of course also style that

6
00:00:31,580 --> 00:00:37,100
and there are a couple of ways of styling that, since it's a div, we could set up some general styling

7
00:00:37,100 --> 00:00:39,110
for divs of course,

8
00:00:39,110 --> 00:00:44,540
alternatively we access the style attribute and we add styles step-by-step,

9
00:00:44,720 --> 00:00:51,230
for example on the tooltip container here, we can access the style property which every DOM node has

10
00:00:51,230 --> 00:00:56,900
in Javascript and we could give this a background color of black

11
00:00:56,900 --> 00:01:06,580
and then we duplicate this to set a text color of white maybe. Now with that if we save that and we reload,

12
00:01:06,710 --> 00:01:12,200
we have this style, a bit better but of course the positioning is still off.

13
00:01:12,230 --> 00:01:18,890
Now we might want to make sure that this has an absolute position, so that our tooltip container style,

14
00:01:19,340 --> 00:01:23,550
the position is absolute.

15
00:01:23,570 --> 00:01:29,230
That means that when it should be positioned relative to our entire custom element, we should give our

16
00:01:29,250 --> 00:01:32,870
custom element a style of relative.

17
00:01:32,870 --> 00:01:39,710
So in the connected callback where our custom element has been rendered to the DOM, there we can access

18
00:01:39,800 --> 00:01:40,940
our style,

19
00:01:40,970 --> 00:01:49,150
so the style of the custom element itself, the style of the uc-tooltip and there, we set the position

20
00:01:49,300 --> 00:01:56,190
equal to relative. If we now save that and we reload,

21
00:01:56,250 --> 00:02:01,650
now this looks a bit better, doesn't split our line any more.

22
00:02:01,710 --> 00:02:10,290
Now maybe we also should set a z-index here so that it is above all other elements, z-index and set

23
00:02:10,290 --> 00:02:13,140
this to a value of 10 maybe.

24
00:02:13,170 --> 00:02:19,620
Now if you reload this, this looks better, it now really is an overlay near to our question mark,

25
00:02:19,620 --> 00:02:20,970
I'm liking this.

26
00:02:21,480 --> 00:02:33,120
So this already is a nice way but we also have a problem here. If I, for some reason, have a general style

27
00:02:33,180 --> 00:02:42,420
in my page with style tags or a CSS file which I import where I let's say style all my divs

28
00:02:42,870 --> 00:02:47,350
to have the border of two pixels solid and orange

29
00:02:47,490 --> 00:02:53,970
and obviously this is a bit of a made up example but you could certainly have some global styles affecting

30
00:02:54,120 --> 00:03:02,370
all divs or all h1 tags and maybe in your custom web component, you are using a h1 tag or as we are doing

31
00:03:02,370 --> 00:03:10,530
it, you are using a div and now what you will see is that if I save that and I reload this page, I have

32
00:03:10,530 --> 00:03:14,450
that orange border on that div in my web component too

33
00:03:14,670 --> 00:03:16,590
and you typically don't want that,

34
00:03:16,740 --> 00:03:22,290
you typically don't want to have global styles affecting your web components and you also don't want

35
00:03:22,290 --> 00:03:28,110
to have styles you defined inside of your web components affect outside elements.

36
00:03:28,110 --> 00:03:35,580
In addition, it would be nice if we don't have to create everything programmatically like this with one

37
00:03:35,580 --> 00:03:38,340
line of code after the other and

38
00:03:38,430 --> 00:03:46,320
if we could define some HTML template instead of adding or creating HTML elements with

39
00:03:46,320 --> 00:03:52,470
create element all the time and for that, we have a solution,

40
00:03:52,530 --> 00:04:02,070
the shadow DOM and the templates. Both these techniques will help us with ensuring that we write a nice, reusable

41
00:04:02,280 --> 00:04:05,850
and encapsulated custom web component.