カスタム要素(Custom Element)
新しいHTML要素を定義するWeb標準。customElements.define('my-button', class extends HTMLElement { ... }) のように書く。2018年に標準化され、Web Components仕様の土台となっている。
現行のブラウザはすべてネイティブに対応している。用途は、フレームワークに依存しないコンポーネントライブラリで、React・Vue・Angularのどれでも使えるデザインシステムなどだ。Microsoft Fluent UI、GitHub Primer、Shoelaceが例になる。ライフサイクルは connectedCallback、disconnectedCallback、attributeChangedCallback が組み込まれている。React/Vueと比べると、純粋なUIコンポーネントには単純だが、データバインディングやリアクティビティは不得手で、自前の状態管理が要る。現代のフレームワークでは、GoogleのLitが、カスタム要素とリアクティブなプロパティの上に載る薄い層になっている。スコープ付きCSSとDOMの分離のために、Shadow DOMと併用されることが多い。