1
00:00:02,400 --> 00:00:04,800
So with the styling cleaned up a little bit,

2
00:00:04,890 --> 00:00:10,530
let's come back to some key functionalities we can add inside of our web components

3
00:00:10,710 --> 00:00:15,390
and there is one thing which we haven't done at all thus far. Thus far,

4
00:00:15,510 --> 00:00:21,420
the text for our tooltip always was set statically, which means we assigned it through this attribute

5
00:00:21,420 --> 00:00:21,840
here

6
00:00:21,840 --> 00:00:25,490
but there was no way of changing that at runtime,

7
00:00:25,500 --> 00:00:31,510
now I do want to change it and for that, I of course need some logic that allows me to change it.

8
00:00:31,590 --> 00:00:37,320
I'll simply do it in the developer tools for now because there, you have to keep in mind that I can of

9
00:00:37,320 --> 00:00:39,050
course click into that text here,

10
00:00:39,090 --> 00:00:45,420
double click on it and I can set this to some new text but if I do so and I hover over this, we still

11
00:00:45,420 --> 00:00:52,380
see the old text because changes to attributes are not picked up inside of the web component

12
00:00:52,380 --> 00:00:58,380
and I want to highlight here that when I change this manually in the developer tools, this is no different

13
00:00:58,590 --> 00:01:03,600
to this being changed through some Javascript code for example and that of course would be the more

14
00:01:03,660 --> 00:01:10,020
realistic use case for your application where you for example listen to some user input and the text

15
00:01:10,020 --> 00:01:16,050
entered by the user should end up here in the attribute and I'm just not doing that here because it requires

16
00:01:16,050 --> 00:01:19,770
some extra boilerplate code that has nothing to do with web components,

17
00:01:19,770 --> 00:01:24,960
so we'll just do that through manual editing here in the developer tools.

18
00:01:24,960 --> 00:01:31,020
The problem is that right now our changes don't get picked up and that is what I want to change. For

19
00:01:31,230 --> 00:01:31,970
changing this,

20
00:01:31,980 --> 00:01:34,410
I'll have to go back to my tooltip.js file

21
00:01:43,640 --> 00:01:48,600
and there, I can add a new lifecycle hook which I did mentioned earlier in this course.

22
00:01:48,630 --> 00:01:57,080
Do you remember which one that was? It was the attribute change callback, this executes when an observed

23
00:01:57,170 --> 00:02:04,310
attribute is updated and that observed part is going to become important by the way. So let's add it

24
00:02:04,310 --> 00:02:13,630
here, let's add the attribute changed callback method here and this method actually receives three arguments,

25
00:02:13,630 --> 00:02:17,830
the name of the attribute which changed, the old value of that attribute

26
00:02:17,920 --> 00:02:24,760
and now, the new value. Now in there, for now to keep it simple, let's simply output this. So I'll console

27
00:02:24,760 --> 00:02:28,610
log the name, the old value and the new value

28
00:02:29,120 --> 00:02:35,110
and if I do that, the expectation would be that when I reload this page and I come in here and change

29
00:02:35,110 --> 00:02:43,080
that text to something new, if we then go to our console, we see an output there but this is actually empty

30
00:02:43,160 --> 00:02:50,540
and the reason for that is that on the slide I deliberately wrote observed attributes trigger this and

31
00:02:50,540 --> 00:02:53,200
we're not observing any attributes right now.

32
00:02:53,270 --> 00:03:00,380
This is simply a performance optimization Javascript forces us to implement, it does not by default watch

33
00:03:00,500 --> 00:03:05,930
all the attributes of this element because there might be a lot of elements which can change which you

34
00:03:05,930 --> 00:03:07,910
don't care about in your component,

35
00:03:07,940 --> 00:03:12,980
let's say you're changing a class which you only use in the light DOM, you're not interested in that

36
00:03:12,980 --> 00:03:14,870
class inside of the component then

37
00:03:14,960 --> 00:03:20,360
so why would you watch for changes or maybe you are interested in the class inside of the component

38
00:03:20,660 --> 00:03:23,080
but only because you use it the styles here,

39
00:03:23,090 --> 00:03:28,040
well that will be picked up automatically then but if you don't want to run any logic in Javascript,

40
00:03:28,220 --> 00:03:30,440
there's no need to trigger this.

41
00:03:30,830 --> 00:03:37,700
So to get something into this callback or to trigger this callback for a specific attribute, you have

42
00:03:37,700 --> 00:03:43,700
to tell Javascript that you're watching it and you do inform Javascript that you do care about a certain

43
00:03:43,910 --> 00:03:49,010
attribute by adding a special property to your class here.

44
00:03:49,250 --> 00:03:57,260
You do this by adding the static keyword, static simply means that it is a property or in this case, it

45
00:03:57,260 --> 00:04:04,910
will be a getter function that can be called from outside without creating this class or an object based

46
00:04:04,910 --> 00:04:06,160
on that class first,

47
00:04:06,170 --> 00:04:09,640
you don't have to care about that though because you will not be creating it,

48
00:04:09,710 --> 00:04:15,260
then you add the get keyword which simply means this is now a function that will return you a value but

49
00:04:15,260 --> 00:04:22,420
you can't reassign a value to the property of this class which is hidden behind that getter and then

50
00:04:22,420 --> 00:04:25,720
the name has to be observed attributes

51
00:04:25,970 --> 00:04:29,400
and this is now written as a normal function or method here.

52
00:04:29,480 --> 00:04:34,640
Now again, might look a bit strange if you've never heard about getters and setters and if you're brand

53
00:04:34,670 --> 00:04:40,580
new to object oriented programming in general, the idea here is that this is like a property of this

54
00:04:40,580 --> 00:04:41,360
class,

55
00:04:41,360 --> 00:04:44,860
so like something we initialized with this in here

56
00:04:45,170 --> 00:04:46,980
but it's not.

57
00:04:47,030 --> 00:04:48,810
It is accessible from outside

58
00:04:48,860 --> 00:04:51,900
and more importantly, it's not settable from outside,

59
00:04:52,010 --> 00:04:53,960
you can only get the value here,

60
00:04:53,990 --> 00:05:01,340
so this is like a locked down property and in there, you return an array with all the attribute names

61
00:05:01,550 --> 00:05:03,960
you want to listen to changes.

62
00:05:04,010 --> 00:05:12,260
So here, I simply add text and I add text here as a string because I have my text attribute here.

63
00:05:12,260 --> 00:05:19,290
It could of course also add class if I wanted to listen to changes to the class attribute or whichever

64
00:05:19,320 --> 00:05:25,050
other attributes you might have but you should only add here what you really care about.

65
00:05:25,200 --> 00:05:32,250
And now with this added, I can save this and go back to my application and if I reload now and edit this text

66
00:05:32,250 --> 00:05:41,610
again to something new and I go to the console, now we see output here, we actually see two because when

67
00:05:41,610 --> 00:05:46,690
I first clicked into it and deleted the content it registered this as a change too.

68
00:05:46,890 --> 00:05:52,200
This is the change we just applied and there we see the name of the attribute because remember, I am

69
00:05:52,200 --> 00:05:56,490
simply logging the name and then the old value and then the new value,

70
00:05:56,490 --> 00:05:59,040
so here we see the name of the attribute that changed,

71
00:05:59,100 --> 00:06:04,590
that was the text attribute, we see the old value that was this text and we see the new value which I

72
00:06:04,590 --> 00:06:11,160
entered, this one and now with that, we finally have a way of adjusting the code or the text we see here

73
00:06:11,160 --> 00:06:14,280
when we hover over this and we'll do that in the next lecture.