1
00:00:02,550 --> 00:00:06,920
So now that we learned more about attributes and how we can listen to changes,

2
00:00:07,000 --> 00:00:10,740
let me come back to our general logic here

3
00:00:10,830 --> 00:00:15,090
in the web component. For one I noticed we still have a little redundant code in there,

4
00:00:15,090 --> 00:00:19,210
here where I append this tooltip icon to my shadow root,

5
00:00:19,230 --> 00:00:20,980
this is simply not required anymore,

6
00:00:21,000 --> 00:00:24,650
we have it here in the template so it is rendered by default

7
00:00:24,690 --> 00:00:28,090
so I can remove that and still have it there

8
00:00:28,860 --> 00:00:31,360
but this was not the main part I wanted to focus on.

9
00:00:31,530 --> 00:00:38,040
Instead what we also can do, we can clean up our event listeners we got here,

10
00:00:38,040 --> 00:00:42,000
right now we add these event listeners but we never clean them up.

11
00:00:42,450 --> 00:00:48,120
Now it's always a good idea to clean up your stuff when this component should ever be removed from the

12
00:00:48,120 --> 00:00:48,600
DOM

13
00:00:48,660 --> 00:00:52,680
and I can show you how it can be removed in a second

14
00:00:52,890 --> 00:00:54,960
and for this we have another lifecycle

15
00:00:54,960 --> 00:00:56,220
I hope you learned about earlier,

16
00:00:57,090 --> 00:01:05,670
we got the disconnected callback and this will be executed when the element is removed from the DOM.

17
00:01:05,700 --> 00:01:12,820
Now let me simply output disconnected here for now before we add any other logic and

18
00:01:12,850 --> 00:01:15,980
let's go back to our page and reload

19
00:01:16,210 --> 00:01:21,130
and of course we again could have some Javascript code which simply selects this element and removes

20
00:01:21,130 --> 00:01:28,870
it, just as we by the way also remove our tooltip container here. You can remove any node with remove

21
00:01:28,870 --> 00:01:29,450
child,

22
00:01:29,470 --> 00:01:32,380
you just have to select the parent of it and then get rid of it.

23
00:01:32,380 --> 00:01:37,990
So we could get access to the paragraph and remove this child from it or here to simulate it in an even

24
00:01:37,990 --> 00:01:40,090
easier way, in the dev tools

25
00:01:40,120 --> 00:01:47,590
I can simply select it and hit the delete or backspace key and it's gone and in the console, we see disconnected

26
00:01:47,920 --> 00:01:52,190
because this gets executed when this component gets removed from the DOM

27
00:01:52,480 --> 00:01:54,500
and of course for every component separately.

28
00:01:54,610 --> 00:01:58,140
So that second tooltip, if I remove that, we see disconnected again,

29
00:01:58,150 --> 00:02:05,110
now it was called twice or printed twice because it was printed for the two separate elements, because

30
00:02:05,110 --> 00:02:08,020
they are treated totally independent from each other.

31
00:02:08,020 --> 00:02:11,300
Now the disconnected callback is a great place for cleanup work,

32
00:02:11,320 --> 00:02:18,100
cancel any HttpRequests you might be doing, maybe send a log message to your own statistics server

33
00:02:18,550 --> 00:02:24,180
or in our case, clean up the event listeners, the mouse enter and mouse leave listeners.

34
00:02:24,250 --> 00:02:28,540
Now we can clean up these listeners by first of all storing the tooltip

35
00:02:28,570 --> 00:02:36,250
icon reference here, not in a constant because constants like variables are only accessible in the scope,

36
00:02:36,250 --> 00:02:41,740
so in the function in this case, in the method where you defined them, I want to access it from down there

37
00:02:41,740 --> 00:02:42,010
though

38
00:02:42,020 --> 00:02:48,130
so I have to turn it into a class property and we do that by simply storing it in one

39
00:02:48,160 --> 00:02:54,280
and for that simply to make it clear that we have such a class property, I'll define one here,

40
00:02:54,310 --> 00:03:00,910
_tooltipIcon, to make sure it is seen as a private property of this class.

41
00:03:01,000 --> 00:03:05,620
It's uninitialized here and we wouldn't have to define it here first by the way,

42
00:03:05,620 --> 00:03:11,350
I just want to have a definition here so that when we look at this component, we quickly see the properties

43
00:03:11,350 --> 00:03:20,110
we're using but with it defined, I can now use it and it can use it down there and store my span in the

44
00:03:21,640 --> 00:03:28,210
tooltip icon property we just initialized and replace all tooltip icon references here with references

45
00:03:28,210 --> 00:03:34,920
to my tooltip icon property, class property and now we can go to the disconnected callback

46
00:03:35,020 --> 00:03:39,460
and there, I can add remove listener, remove event listener,

47
00:03:39,460 --> 00:03:44,520
call this method and I want to remove my mouse enter listener,

48
00:03:44,560 --> 00:03:51,740
so let's add this here and the way remove event listener works is that we then also have to define the

49
00:03:51,770 --> 00:03:53,080
method which was connected,

50
00:03:53,450 --> 00:04:02,630
so for mouse enter, this was show tooltip like this, so we want to remove that and we want to do the

51
00:04:02,630 --> 00:04:04,580
same for mouse leave and hide tooltip,

52
00:04:04,880 --> 00:04:08,210
so I will just duplicate this mouse

53
00:04:08,420 --> 00:04:18,800
leave, this hide tooltip and with that, if I save all that and I go back and reload, if I select my component

54
00:04:18,830 --> 00:04:19,820
and remove it,

55
00:04:19,940 --> 00:04:23,930
well we don't see anything here but now we do our cleanup work,

56
00:04:23,930 --> 00:04:28,410
we take advantage of the disconnected callback to clean up our event listeners here.

57
00:04:28,580 --> 00:04:29,600
Always a good idea

58
00:04:29,810 --> 00:04:36,860
but again you could do any cleanup work or any work in general you have in that method here,

59
00:04:36,980 --> 00:04:44,030
in that lifecycle hook. One important note here at this point though, if you watched closely you see what

60
00:04:44,030 --> 00:04:44,740
I'm removing

61
00:04:44,740 --> 00:04:47,660
here are the event listeners for mouse enter and mouse leave

62
00:04:47,690 --> 00:04:53,720
but I'm pointing at my show tooltip and hide tooltip methods like this.

63
00:04:53,780 --> 00:05:00,880
Now when we add the event listeners, I actually use bind with this to make sure that the this keyword inside

64
00:05:00,880 --> 00:05:02,480
of these methods,

65
00:05:02,480 --> 00:05:04,250
well it works correctly basically.

66
00:05:04,280 --> 00:05:10,130
Now when you use bind on a method or on a function, it generates a new function or method,

67
00:05:10,130 --> 00:05:17,360
so actually the method I'm removing here as an event listener is not exactly the same function object as I

68
00:05:17,360 --> 00:05:19,090
used to attach it.

69
00:05:19,160 --> 00:05:23,830
So technically, these remove event listeners have no effect here,

70
00:05:23,840 --> 00:05:29,030
well they do have an effect but they try to remove a method as a listener which like this was never

71
00:05:29,030 --> 00:05:30,140
attached.

72
00:05:30,140 --> 00:05:35,210
Now the good thing is when you remove an element from the DOM and that is true for custom elements

73
00:05:35,210 --> 00:05:36,020
as well,

74
00:05:36,200 --> 00:05:42,520
any event listeners are automatically removed by the browser, so we won't introduce a memory leak here,

75
00:05:42,530 --> 00:05:45,670
that is something you also learned earlier in the course.

76
00:05:45,890 --> 00:05:49,360
That is why I will leave this code here simply to show you that

77
00:05:49,370 --> 00:05:55,700
you could use disconnected callback for cleanup work but this specific cleanup work here is redundant

78
00:05:55,760 --> 00:05:58,630
and actually won't have the intended effect

79
00:05:58,640 --> 00:06:05,240
but if you had other cleanup work here, like cancelling HttpRequest or anything like that, then

80
00:06:05,270 --> 00:06:08,090
this would be your method and that's why I will leave the code here.