Webコンポーネント
再利用可能でカプセル化された、フレームワーク非依存のHTML要素を作るための標準仕様群である。Custom Elements、Shadow DOM、HTML Templatesの3つを総称する、フレームワークのコンポーネントに代わる標準ベースの選択肢だ。
3本柱は次のとおり。Custom Elementsは独自の要素(<my-card>)を、固有のJSロジックとライフサイクルつきで定義する。Shadow DOMは要素に隔離されたDOMとスタイルの木を与え、CSSが外へ漏れることも外から入り込むことも防ぐ。HTML Templates(<template>)は、必要なときに複製して使う不活性なマークアップである。
利点は、どのフレームワークでも、あるいは何も使わなくても動き、しかも本物のカプセル化が得られることだ。Shoelace や Adobe Spectrum のようなデザインシステム、埋め込みウィジェットに向く。欠点は、アプリ構築ではフレームワークより記述が冗長になりやすく、エコシステムも小さいこと。Litのようなライブラリを使えば書き心地はかなり良くなる。