Since all the custom elements act and behave like any other HTML element, they also have the ability to have attributes inside them. We will be discussing attributes in the coming chapter, but, for now, let's assume we have a custom element named <my-name>, whose purpose is to display the text Hello, my name is John Doe.
So, the definition of this Web Component would become something like this:
// MyName.js
export default class MyName extends HTMLElement {
constructor() {
super();
this.innerText = 'Hello, my name is John Doe';
}
}
Now, let's say we want to have a different name. And for every different name, we will need to have a different definition of the custom element, making a totally different Web Component. In order to fix this problem, we can use attributes. We can pass the name in an attribute inside the HTML tag of this element, making it look like this:
<my-name fullname="John Doe"></my-name>
But, in order to make a Web Component use the attributes provided, we will first ask it to observe certain attributes, which we can provide in an array like this:
static get observedAttributes() {
return ['fullname'];
}
Here, we are just going to observe fullname. You can add more as per your requirement. We will be diving into attributes in the coming chapters.
Once we have started observing these attributes, we can then use the attributeChangedCallback() to make necessary changes to custom elements as per the requirement. I am simply updating the name in the following callback:
attributeChangedCallback(name, oldValue, newValue) {
if (name == 'fullname') {
this.innerText = 'Hello, my name is ' + newValue;
}
}
As you can see, attributeChangedCallback() takes in three parameters: name, which is the name of the attribute changed, and oldValue and newValue, which are the values before and after the change, respectively.
In the preceding code, we are simply checking whether the name of the attribute is fullname and updating the text to say the updated name.
The full component code looks like this:
// MyName.js
export default class MyName extends HTMLElement {
constructor() {
super();
this.innerText = 'Hello, my name is NO NAME';
}
static get observedAttributes() {
return ['fullname'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name == 'fullname') {
this.innerText = 'Hello, my name is ' + newValue;
}
}
}
The index.html file associated with it becomes as follows:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Attribute Changed Callback Example</title>
<!--
Notice how we use type="module"
-->
<script type="module">
/// importing the first custom element
import MyName from './MyName.js';
customElements.define('my-name', MyName);
</script>
</head>
<body>
<my-name fullname="John Doe"></my-name>
</body>
</html>
As you can see, we are not doing anything different than what we have done in the previous sections.