😎

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

2022/11/11に公開約1,300字

Web Componentを作る2つのやり方

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

  1. 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>
  1. 既存の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

Discussion

ログインするとコメントできます