Creating Custom Elements in JavaScript DOM (Live Playground)

In this tutorial, we will learn how to create custom elements in JavaScript DOM to extend the functionality and appearance of HTML elements in your web applications.

What are Custom Elements?

Custom elements are a feature of the Web Components specification that allows developers to create new, reusable HTML elements with their own tag names, attributes, and behavior.

Creating a Custom Element

To create a custom element, you need to define a class that extends the HTMLElement class and then register it with a custom tag name using customElements.define().

Example: Creating a Simple Custom Element

Let's create a custom element called my-heading that displays a heading with a custom text color:

class MyHeading extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        h1 {
          color: ${this.getAttribute('color') || 'black'};
        }
      </style>
      <h1>
        <slot></slot>
      </h1>
    `;
  }
}

customElements.define('my-heading', MyHeading);

Here's what the code does:

1. Define a class MyHeading that extends HTMLElement.
2. Call super() in the constructor to initialize the base HTMLElement.
3. Attach a shadow root to the custom element using this.attachShadow({ mode: "open" }).
4. Set the inner HTML of the shadow root with a template string that includes the custom styles and content.
5. Register the custom element with a tag name using customElements.define("my-heading", MyHeading).

Using the Custom Element

Now that we have defined our custom element, we can use it in our HTML:

<my-heading color="red">Hello, World!</my-heading>

This will render a heading with the text "Hello, World!" and a red color.

Live Playground, Try it Yourself

Example: Creating a Custom Element with Lifecycle Callbacks

Custom elements can also have lifecycle callbacks that are triggered when the element is created, connected, disconnected, or has its attributes changed.

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }

  connectedCallback() {
    this.textContent = `Count: ${this.count}`;
    this.addEventListener('click', () => this.increment());
  }

  disconnectedCallback() {
    this.removeEventListener('click', () => this.increment());
  }

  increment() {
    this.count++;
    this.textContent = `Count: ${this.count}`;
  }
}

customElements.define('my-counter', MyCounter);

In this example, we create a custom element called my-counter that displays a count and increments it when clicked:

1. Define a class MyCounter that extends HTMLElement.
2. Call super() in the constructor to initialize the base HTMLElement.
3. Set an initial count value in the constructor.
4. Define a connectedCallback method that sets the initial text content and adds a click event listener.
5. Define a disconnectedCallback method that removes the click event listener.
6. Define an increment method that increments the count and updates the text content.
7. Register the custom element with a tag name using customElements.define("my-counter", MyCounter).

Live Playground, Try it Yourself

Conclusion

In this tutorial, we have learned how to create custom elements in JavaScript DOM to extend the functionality and appearance of HTML elements in your web applications. Custom elements allow you to create reusable components with their own tag names, attributes, and behavior, making your code more modular and maintainable.

Remember to define a class that extends HTMLElement, initialize the base HTMLElement with super(), and register the custom element with a custom tag name using customElements.define(). You can also use lifecycle callbacks like connectedCallback and disconnectedCallback to handle additional functionality when the element is connected or disconnected from the DOM.

Now that you have learned how to create custom elements, you can start using them in your projects to create more flexible and reusable web components.