1
00:00:02,380 --> 00:00:04,930
Now last but not least, let me show one

2
00:00:04,930 --> 00:00:10,930
totally optional optimization or restructuring in the code.

3
00:00:10,930 --> 00:00:17,440
Right now I access the DOM here in show tooltip when I append my tooltip container and in hide tooltip

4
00:00:17,470 --> 00:00:23,670
when I remove it and there is nothing wrong with it and for a web component as simple as this one,

5
00:00:23,740 --> 00:00:30,120
this might actually be the best way of doing it but it's also worth looking at a pattern which you see

6
00:00:30,190 --> 00:00:34,150
from time to time and which I at least want to get you thinking about,

7
00:00:34,150 --> 00:00:38,270
you can add a method in your class as we did it before,

8
00:00:38,320 --> 00:00:44,110
let's say we call it _render, the name is totally up to you though. It's not a reserved name,

9
00:00:44,110 --> 00:00:45,560
I just want to make sure it's private

10
00:00:45,580 --> 00:00:51,790
to really make clear that we only call it from inside this class and I name it render because this should

11
00:00:51,790 --> 00:00:56,260
be a method which is responsible for updating the DOM.

12
00:00:56,260 --> 00:01:01,240
So what I now will do is I will go up to my constructor and add a new property,

13
00:01:01,240 --> 00:01:06,570
this _tooltipVisible and I'll set it to false initially,

14
00:01:06,700 --> 00:01:08,660
so initially this should not be visible.

15
00:01:08,710 --> 00:01:11,190
Now of course we're not using this property yet,

16
00:01:11,500 --> 00:01:13,170
I want to use that in the render method now.

17
00:01:13,180 --> 00:01:22,000
Here I'll check if this tooltip visible is true and if it is true, then I want to create and append

18
00:01:22,030 --> 00:01:23,330
this element.

19
00:01:23,440 --> 00:01:25,120
So here I'll go there,

20
00:01:25,120 --> 00:01:29,920
copy that code and append this child, else

21
00:01:30,160 --> 00:01:39,230
I will execute the code for removing the child, let me grab that and paste it in there. This also

22
00:01:39,230 --> 00:01:44,900
means that the tooltip container now can be converted back to a constant that only exists in the

23
00:01:44,900 --> 00:01:48,260
render method because I don't access it anywhere else.

24
00:01:48,890 --> 00:01:50,390
So I can go up there,

25
00:01:50,390 --> 00:02:00,080
remove the tooltip container in my constructor and in the render method, I'll simply add a new variable

26
00:02:00,080 --> 00:02:09,860
with let tooltip container and I'll then simply initialize it here, set its text content here and add it

27
00:02:09,920 --> 00:02:12,030
here in the end or remove it

28
00:02:12,050 --> 00:02:21,330
here. For this I'll just check if tooltip container is defined and I'll only try to remove it if it is

29
00:02:21,330 --> 00:02:22,790
defined, otherwise

30
00:02:22,890 --> 00:02:27,380
if this was undefined still and we somehow would end up here, we would face a problem.

31
00:02:28,560 --> 00:02:35,130
Now with the render method defined in show tooltip, all I have to do is I have to switch to tooltip visible

32
00:02:35,190 --> 00:02:41,520
property to true, excuse me and then execute the render method again because in there, I

33
00:02:41,520 --> 00:02:47,280
will then have all the logic for checking tooltip visible and adding the container and in hide tooltip,

34
00:02:47,310 --> 00:02:48,660
I'll do the opposite,

35
00:02:48,660 --> 00:02:53,880
I'll set tooltip visible to false and then execute the render method.

36
00:02:57,010 --> 00:02:59,410
Now what's the idea behind this approach?

37
00:02:59,410 --> 00:03:04,570
Well the more and more logic you add, maybe you also render other things in your component at some

38
00:03:04,570 --> 00:03:11,380
point of time, the more sense it makes to do all that rendering in a central place, so that you quickly

39
00:03:11,380 --> 00:03:17,680
can have a look at all your rendering related code in one place instead of having different parts of

40
00:03:17,680 --> 00:03:22,240
rendering different parts of your DOM distributed throughout your component, instead

41
00:03:22,240 --> 00:03:29,950
now we know in the render method, we have all the logic for accessing our shadow DOM and for adding our

42
00:03:30,280 --> 00:03:31,500
tooltip container in this case

43
00:03:31,600 --> 00:03:35,650
but if we had any other things we wanted to render, we would do it in there too

44
00:03:35,760 --> 00:03:41,560
and so we could always quickly see what we're doing with our DOM in our component and all the other

45
00:03:41,560 --> 00:03:48,040
places and all the other methods of our component are only responsible for updating data, which is then

46
00:03:48,040 --> 00:03:51,640
getting used in render to update the DOM correctly,

47
00:03:51,640 --> 00:03:59,500
like we're using tooltip visible to update the DOM correctly by either adding or removing our tooltip container

48
00:03:59,500 --> 00:04:04,420
and we're only setting the data here and then of course we always have to call render when we know that

49
00:04:04,420 --> 00:04:10,570
we changed something that should trigger a re-render. We can also call render initially here, even though

50
00:04:10,570 --> 00:04:12,340
we don't require it for this component

51
00:04:12,520 --> 00:04:20,010
but we can call it initially here in the connected callback to say hey when this component gets loaded

52
00:04:20,010 --> 00:04:23,820
for the first time, we also want to render it for the first time.

53
00:04:23,850 --> 00:04:29,700
Now if I reload here, this of course has no special effect because we don't show the tooltip because

54
00:04:29,700 --> 00:04:37,200
initially we have the tooltip visible status set to false but we do render it as soon as I hover over

55
00:04:37,200 --> 00:04:38,190
this,

56
00:04:38,190 --> 00:04:40,820
now it's not getting removed anymore if I hover away,

57
00:04:40,840 --> 00:04:44,380
let me quickly check that, yes this makes sense,

58
00:04:44,380 --> 00:04:50,260
this check here and also the way we removed this will not work, tooltip container always gets re-initialized

59
00:04:50,260 --> 00:04:55,000
to an empty, to an undefined variable when render gets called, the old state is of course not carried

60
00:04:55,000 --> 00:04:55,730
over

61
00:04:55,750 --> 00:04:57,950
so this will not be set

62
00:04:58,150 --> 00:05:03,840
if we call render after changing tooltip visible to false.

63
00:05:03,850 --> 00:05:08,990
So what I should do instead is I should initialize this with my loaded tooltip container

64
00:05:09,010 --> 00:05:18,550
if available, so I will simply access my shadow root here and there,

65
00:05:18,800 --> 00:05:25,760
I'll query for either a div because I know my tooltip container will be the only div or of course

66
00:05:25,760 --> 00:05:29,750
we could also assign a class to our tooltip container to query by that or an ID

67
00:05:29,990 --> 00:05:31,430
but here I'll do it by this

68
00:05:31,430 --> 00:05:37,530
and now if this is set, then I can remove it and I do load it whenever render is called.

69
00:05:37,550 --> 00:05:41,290
So with this change in place, if I now reload this, still everything works,

70
00:05:41,320 --> 00:05:42,680
no errors here,

71
00:05:42,720 --> 00:05:48,410
if I hover over this get shown, I can hover away and this now all works with this central render method.

72
00:05:48,680 --> 00:05:52,730
Again, not something we need so much for this trivial component

73
00:05:52,730 --> 00:05:56,890
but the more complex your components get, the more different parts of your shadow

74
00:05:56,890 --> 00:06:02,630
DOM you might be updating, the more sense it makes to do all this updating in one central place where

75
00:06:02,630 --> 00:06:08,450
you can then quickly see all your updating logic instead of having it distributed across your entire

76
00:06:08,450 --> 00:06:10,730
component and all the methods in your component.