The Standard

特定のフレームワークにロックインされない。どこでも動くコンポーネント。

Custom Elements

独自のHTMLタグ（<my-button>など）を定義するAPI。

Shadow DOM

コンポーネントの内部構造（HTML/CSS）を外部から隠蔽（カプセル化）する仕組み。外のCSSの影響を受けない。

True Encapsulation

graph TD
    Document[Document (Light DOM)] --> Host[<my-element> (Shadow Host)]
    Host --> ShadowRoot[#shadow-root]
    ShadowRoot --> Elements[Internal HTML/CSS (Shadow DOM)]
    style[External CSS] -.-x Elements

Use Cases:

Design Systems: 会社全体のデザインシステムをWeb Componentsで作れば、全プロダクト（React, Vue, Rails）で同じボタンが使える。
Micro-Frontends: 異なる技術スタックのチームが作ったUIを統合するのに最適。