Jan 14, 2022

Make a web component

To make a web component, you need to create a new class. You can extend an existing component class if you want to preserve some semantic behavior, but we’ll go with the default HTMLElement:

class HelloWorld extends HTMLElement {}

Next, we need to add a constructor method and call the super function to ensure that our component is initialized with all the necessary information:

class HelloWorld extends HTMLElement {
  constructor() {
    super();
  }
}

Now we need a DOM to build on. Web components use a shadow DOM, which we’ll create by calling our class’s attachShadow method:

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

    const shadow = this.attachShadow({ mode: "open" });
  }
}

With our shadow DOM declared, we can create a new element. Let’s go with a span element with the content “Hello world!” and append it to our shadow:

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

    const shadow = this.attachShadow({ mode: "open" });

    const span = document.createElement("span");
    span.textContent = "Hello world!";

    shadow.appendChild(span);
  }
}

The last thing we need to do is define our custom web component with:

class HelloWorld extends HTMLElement {
  /* Collapsed for brevity */
}

customElements.define("hello-world", HelloWorld);

Finally, references your new element in the HTML:

<hello-world></hello-world>

Congratulations, you just made your first web component!

Happy coding!

---