Web Componentsとは何ですか？

ブラウザ標準のコンポーネント技術。Custom Elements、Shadow DOM、HTML Templatesの3つの仕様で構成される。

Web Componentsのポイントは？

Custom Elements（独自HTMLタグの定義）。Shadow DOM（スタイルのカプセル化）。HTML Templates（再利用可能なHTML断片）。React/Vue/Angular等のフレームワークに依存しない

【うぇぶこんぽーねんつ】

Web Components とは？

💡 フレームワーク不要の「ブラウザ標準コンポーネント」

📌 このページのポイント

Custom Elements（独自HTMLタグの定義）
Shadow DOM（スタイルのカプセル化）
HTML Templates（再利用可能なHTML断片）
React/Vue/Angular等のフレームワークに依存しない

Web Componentsの構成要素

ひよこ

Reactのコンポーネントと何が違うの？

ペンギン先生

React コンポーネントはreact/react-domランタイムが必要。Web ComponentsはブラウザのネイティブAPI。のようなカスタムタグをReactなしで定義でき、どのフレームワーク（React/Vue/Angular）でも使える。フレームワーク非依存のUI ライブラリを作りたい場合に最適だよ

ひよこ

Shadow DOMって何？

ペンギン先生

コンポーネント内のスタイルが外部に漏れず、外部のスタイルも内部に影響しないカプセル化の仕組み。コンポーネント内にh1 { color: red }と書いても、ページの他のh1には影響しない。CSS設計で悩まされる「スタイルの衝突」問題を根本解決するんだよ

ひよこ

普及している？

ペンギン先生

GitHub（

タグ拡張等）、YouTube（内部コンポーネント）、Salesforce Lightning Web Components、Adobe Spectrum Web Componentsなど大企業が採用。ただしReactやVueのエコシステムの方が圧倒的に大きくて、開発体験も成熟している。Web Componentsは「フレームワーク間で共有するUI ライブラリ」の分野で最も輝くよ

ひよこ

Lit（旧LitElement）って何？

ペンギン先生

Google開発のWeb Components作成ライブラリ。素のWeb Components APIは冗長だけど、LitはReactに近い書き心地で軽量（5KB）。テンプレートリテラルでHTMLを書いて、リアクティブなプロパティで再レンダリングする。Web Componentsを使うならLitから始めるのがおすすめだよ

まとめ：ざっくりこれだけ覚えればOK！

「Web Components」って出てきたら「ブラウザ標準のカスタムコンポーネント技術」と思えればだいたいOK！

📖 おまけ：英語の意味

「Web Components」＝ Webコンポーネント

💬 W3C標準のコンポーネント技術。2011年にGoogleのAlex Russellが提唱したよ

← 用語集にもどる