JavaScript by Example

Responding to changes in element attributes

We have a full working Weather Widget but the weather information gets loaded only when the widget gets added to the DOM for the first time. If you try to change the value of the attributes latitude and longitude either from Chrome DevTools or from JavaScript, the value changes but the Weather Widget will not get updated. To make the weather element respond to the changes in latitude and longitude, we need to declare them as observed attributes. To do so, inside your Weather class, add the following line: 

static get observedAttributes() { return ['latitude', 'longitude']; }

This will create a static getter observedAttributes() that will return an array of all the attribute names, for which the ...