WebComponentsのカスタム要素
public.icon
カスタム要素の使用 - Web API | MDN
HTMLElementを継承したクラスで実装
code:js
class PopupInfo extends HTMLElement {
constructor() {
super();
}
// 要素の機能をここに書く
}
customElements.define("popup-info", PopupInfo); // バインド
🤖要約：
カスタム要素は、HTMLElement を継承して独自のHTMLタグを定義でき、ライフサイクルコールバックで動作を制御する。
組み込み要素を拡張する「カスタム組み込み要素」と、完全に新しい「自律型カスタム要素」の2種類がある。
シャドウDOMや attributeChangedCallback()、:state() 擬似クラスにより、スタイルや動作を柔軟に定義・制御可能。