WebLog

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

2022/11/11 20:32

Web Component を作る 2 つのやり方

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

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

1<script>
2 // HTMLElementを継承して作る
3 class MyElement extends HTMLElement {
4 constructor() {
5 super();
6 const shadow = this.attachShadow({ mode: "open" });
7 if (!shadow) throw new Error("Something went wrong");
8
9 shadow.innerHTML = `
10 <div>my-elementだよ</div>
11 `;
12 }
13 }
14
15 customElements.define("my-element", MyElement);
16</script>
17
18<my-element></my-element>

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

1<script>
2 // HTMLButtonElementを継承して作る
3 class HelloButton extends HTMLButtonElement {
4 constructor() {
5 super();
6 this.addEventListener("click", () => alert("Hello"));
7 }
8 }
9
10 customElements.define("hello-button", HelloButton);
11</script>
12
13<hello-button></hello-button>

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

1<script>
2 // HTMLButtonElementを継承して作る
3 class HelloButton extends HTMLButtonElement {
4 constructor() {
5 super();
6 this.addEventListener("click", () => alert("Hello"));
7 }
8 }
9
10 // 既存のbutton要素を拡張したもので登録
11 customElements.define("hello-button", HelloButton, { extends: "button" });
12</script>
13
14<!-- is属性でbutton要素でもどんなbutton要素かを指定できる -->
15<button is="hello-button"></button>

実際使い道あるの?

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

参考

Custom elements
Custom elements

Custom elements

最新の投稿