JavaScript by Example

Essential things to know

These are a few things to know that will come in handy when working with custom elements. Just as we extended the general HTMLElement interface, we can also extend inbuilt elements, such as the paragraph element <p>, the button element <button>, and so on. This way, we can inherit all the properties and methods available in the parent element. For example, to extend the button element, do as follows:

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

Here, we are extending the HTMLButtonElement interface instead of the HTMLElement interface. Also, just as inbuilt elements can be extended, custom elements can ...