Getting Started with Web Components

attributeChangedCallback()

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.jsexport 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. ...