web componentsで既存の要素を拡張するときに「is」属性を使うこともできる

Web Component を作る 2 つのやり方

Web Component を作るときには大きく以下の二つのやり方があります:

HTMLElement を拡張して全く新しいコンポーネントを作る

<script>
  // HTMLElementを継承して作る
  class MyElement extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: "open" });
      if (!shadow) throw new Error("Something went wrong");

      shadow.innerHTML = `
        <div>my-elementだよ</div>
      `;
    }
  }

  customElements.define("my-element", MyElement);
</script>

<my-element></my-element>

既存の HTML 要素を拡張してコンポーネントを作る(今回はこっちの話)

<script>
  // HTMLButtonElementを継承して作る
  class HelloButton extends HTMLButtonElement {
    constructor() {
      super();
      this.addEventListener("click", () => alert("Hello"));
    }
  }

  customElements.define("hello-button", HelloButton);
</script>

<hello-button></hello-button>

2 の書き方はこんな風にも書ける

<script>
  // HTMLButtonElementを継承して作る
  class HelloButton extends HTMLButtonElement {
    constructor() {
      super();
      this.addEventListener("click", () => alert("Hello"));
    }
  }

  // 既存のbutton要素を拡張したもので登録
  customElements.define("hello-button", HelloButton, { extends: "button" });
</script>

<!-- is属性でbutton要素でもどんなbutton要素かを指定できる -->
<button is="hello-button"></button>

実際使い道あるの?

わからん...
is 属性で指定できるんだー！で？って感じになってる
「こういうときに便利だよ！」みたいなのあれば教えてください

参考

https://ja.javascript.info/custom-elements