So with the styling cleaned up a little bit,
let's come back to some key functionalities we can add inside of our web components
and there is one thing which we haven't done at all thus far. Thus far,
the text for our tooltip always was set statically, which means we assigned it through this attribute
here
but there was no way of changing that at runtime,
now I do want to change it and for that, I of course need some logic that allows me to change it.
I'll simply do it in the developer tools for now because there, you have to keep in mind that I can of
course click into that text here,
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
see the old text because changes to attributes are not picked up inside of the web component
and I want to highlight here that when I change this manually in the developer tools, this is no different
to this being changed through some Javascript code for example and that of course would be the more
realistic use case for your application where you for example listen to some user input and the text
entered by the user should end up here in the attribute and I'm just not doing that here because it requires
some extra boilerplate code that has nothing to do with web components,
so we'll just do that through manual editing here in the developer tools.
The problem is that right now our changes don't get picked up and that is what I want to change. For
changing this,
I'll have to go back to my tooltip.js file
and there, I can add a new lifecycle hook which I did mentioned earlier in this course.
Do you remember which one that was? It was the attribute change callback, this executes when an observed
attribute is updated and that observed part is going to become important by the way. So let's add it
here, let's add the attribute changed callback method here and this method actually receives three arguments,
the name of the attribute which changed, the old value of that attribute
and now, the new value. Now in there, for now to keep it simple, let's simply output this. So I'll console
log the name, the old value and the new value
and if I do that, the expectation would be that when I reload this page and I come in here and change
that text to something new, if we then go to our console, we see an output there but this is actually empty
and the reason for that is that on the slide I deliberately wrote observed attributes trigger this and
we're not observing any attributes right now.
This is simply a performance optimization Javascript forces us to implement, it does not by default watch
all the attributes of this element because there might be a lot of elements which can change which you
don't care about in your component,
let's say you're changing a class which you only use in the light DOM, you're not interested in that
class inside of the component then
so why would you watch for changes or maybe you are interested in the class inside of the component
but only because you use it the styles here,
well that will be picked up automatically then but if you don't want to run any logic in Javascript,
there's no need to trigger this.
So to get something into this callback or to trigger this callback for a specific attribute, you have
to tell Javascript that you're watching it and you do inform Javascript that you do care about a certain
attribute by adding a special property to your class here.
You do this by adding the static keyword, static simply means that it is a property or in this case, it
will be a getter function that can be called from outside without creating this class or an object based
on that class first,
you don't have to care about that though because you will not be creating it,
then you add the get keyword which simply means this is now a function that will return you a value but
you can't reassign a value to the property of this class which is hidden behind that getter and then
the name has to be observed attributes
and this is now written as a normal function or method here.
Now again, might look a bit strange if you've never heard about getters and setters and if you're brand
new to object oriented programming in general, the idea here is that this is like a property of this
class,
so like something we initialized with this in here
but it's not.
It is accessible from outside
and more importantly, it's not settable from outside,
you can only get the value here,
so this is like a locked down property and in there, you return an array with all the attribute names
you want to listen to changes.
So here, I simply add text and I add text here as a string because I have my text attribute here.
It could of course also add class if I wanted to listen to changes to the class attribute or whichever
other attributes you might have but you should only add here what you really care about.
And now with this added, I can save this and go back to my application and if I reload now and edit this text
again to something new and I go to the console, now we see output here, we actually see two because when
I first clicked into it and deleted the content it registered this as a change too.
This is the change we just applied and there we see the name of the attribute because remember, I am
simply logging the name and then the old value and then the new value,
so here we see the name of the attribute that changed,
that was the text attribute, we see the old value that was this text and we see the new value which I
entered, this one and now with that, we finally have a way of adjusting the code or the text we see here
when we hover over this and we'll do that in the next lecture.