Skip to main content

HTML Custom Elements (Live Playground)

In this tutorial, we will learn how to create and use custom HTML elements to extend the functionality and improve the organization of your web applications. Custom elements are a part of the Web Components technology and provide a way to define new HTML tags with custom behavior.

What are Custom Elements?​

Custom elements are user-defined HTML elements that extend the standard set of HTML elements. They allow you to create reusable components with their own functionality, styles, and structure. Custom elements must have a name containing a hyphen to distinguish them from standard HTML elements.

Creating a Custom Element​

To create a custom element, you need to follow these steps:

  1. Define a new class that extends HTMLElement.
  2. Implement the custom element's behavior inside the class.
  3. Register the custom element using customElements.define().

Here's an example:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Elements</title>
    <script>
      class CustomGreeting extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `<p>Hello, ${this.getAttribute('name')}!</p>`;
        }
      }

      customElements.define('custom-greeting', CustomGreeting);
    </script>
  </head>
  <body>
    <custom-greeting name="John"></custom-greeting>
  </body>
</html>

In this example, we defined a custom element named <custom-greeting> that displays a greeting message with a name attribute. The connectedCallback() method is called when the custom element is attached to the DOM, and we use it to set the element's content.

Using Custom Elements​

Once you have defined and registered a custom element, you can use it just like any other HTML element:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Using Custom Elements</title>
    <script>
      class CustomGreeting extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `<p>Hello, ${this.getAttribute('name')}!</p>`;
        }
      }

      customElements.define('custom-greeting', CustomGreeting);
    </script>
  </head>
  <body>
    <custom-greeting name="John"></custom-greeting>
    <custom-greeting name="Jane"></custom-greeting>
    <custom-greeting name="Alice"></custom-greeting>
  </body>
</html>

In this example, we used the <custom-greeting> element multiple times with different name attributes. Each instance of the custom element displays a greeting message with the corresponding name.

Live Playground, Try it Yourself

Conclusion​

Now you know how to create and use custom HTML elements to extend the functionality and improve the organization of your web applications. This can be useful for creating reusable components with their own behavior, styles, and structure, making your code more modular and maintainable.