Web Components: customElements.define, Lifecycle, Attributes and Events

Browsers let you build components without React or Vue. This set of standards is called Web Components: Custom Elements, Shadow DOM and <template>. In this lesson we cover the first part: creating your own HTML tag.

What a custom element is

A custom element is a class that extends HTMLElement plus the name it is registered under (for example <user-badge>). The name is registered with customElements.define.

class HelloBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from a custom element';
  }
}

customElements.define('hello-badge', HelloBadge);

In HTML you simply write <hello-badge></hello-badge>.

💡 The name must be lowercase and must contain a hyphen: user-card is valid, UserCard and card are not. This guarantees it never clashes with future built-in HTML tags.

Lifecycle callbacks