— 2 minute read

Like Howard Hughes famously said, "Custom Elements are the way of the future." I could be paraphrasing.

But how? Well here's how you do it.

window.customElements.define(
  'component-name',
  class extends HTMLElement {
    constructor() {
      super();
      // Tada!
    }
  }
);

Credit goes to Zach Leatherman for this codepen.

Ha Ha... okay but really.

Okay, first step is to draft up the idea. The base HTML elements aren't complex and our custom element shouldn't be either. I ask myself:

What's a repeated task that I hate doing over and over again?

There could be some discourse about tel:, and its distant relatives mailto:, fax:, sms:, and callto:. For now I just want to focus on tel:.

They frustrate me. Here's a list:

  • Different outcomes depending on device/browser/OS.
  • tel: links can be clicked/activated in contexts that CAN'T INITIATE A PHONE INTERACTION
  • tel: links can be auto-generated by some browsers on some devices on some OS.
  • Side effects due to auto-generated links require extra styling
  • Extra markup to be consumed properly by SEO 🤖 Bots 🤖
  • Extra markup to prevent SEO 🤖 Bots 🤖 from being too greedy
  • Telephone numbers are just hard work with (look up a regex for telephone numbers, no really, I'll wait)

Now that I have my list of demands outline, I like to pseudo-code.

window.customElements.define('phone-number', class extends HTMLElement {});
Note: Defining custom elements and checking for support

This comes down to personal taste, but it should be mentioned that you don't need to defined the customElement inside of the define function. You can define your class outside of it, and just use it as the second argument like this:

window.customElements.define('phone-number', PhoneNumber);