Shadow DOM内のスコープ付きスタイル

シャドウルート内のすべての <style> ルールは、そのルートの内部だけに適用されます。シャドウツリー内の p { color: red } は、そのシャドウ内の段落だけを赤くします。メインドキュメントの段落には影響せず、メインドキュメントのスタイルもシャドウ内部には届きません。

カプセル化により、大規模なアプリケーションを何十年も悩ませてきたグローバル CSS の問題を解消できます。コンポーネントのスタイルがサイトの CSS によって意図せず上書きされることも、コンポーネントが誤ってサイトを壊すこともありません。この境界を定めるのは慣例ではなく仕様です。

シャドウ内部から :host を使用すると、ホスト要素をスタイルできます。セレクターで対象を絞るには :host(selector) を使用します。:host([open]) { display: block; } は、open 属性が存在する場合にだけホスト要素に一致します。

継承可能な CSS プロパティ（color、font-family、line-height）は、継承によってシャドウの境界を越えます。ドキュメントで body { color: blue } を設定すると、シャドウ側で明示的に上書きしない限り、シャドウ内のテキストも青色になります。これは機能の一つであり、タイポグラフィのデフォルトを一貫させられます。

カスタムプロパティ（CSS 変数）はシャドウルートを通じて継承されるため、コンポーネントのテーマ設定 API を公開する標準的な方法です。シャドウ内部で --card-bg: var(--surface, white) を宣言し、利用側がホスト上の --surface を上書きできるようにします。

シャドウ内部の要素に part="name" を付けると、利用側は my-card::part(name) { ... } を使ってスタイルを適用できます。シャドウツリーの大部分をカプセル化したまま、個別のスタイル適用ポイントとして part を使用してください。

shadowRoot.adoptedStyleSheets = [sheet] を使用すると、1 つの CSSStyleSheet を複数のシャドウルートで共有でき、繰り返し行われる <style> の解析を避けられます。new CSSStyleSheet() でシートを作成し、sheet.replaceSync(cssText) で内容を設定します。デザインシステムでは大きなパフォーマンス向上につながります。

シャドウの innerHTML の最上部に <style> タグを配置すると、DOM の残りの部分が構築される前にスタイルが解析されます。これにより、解析の順序が遅れてスタイルが適用される場合に発生する、スタイル未適用コンテンツの一瞬のちらつきを防げます。

:host-context(.dark-mode) :host は、シャドウの外側にある祖先セレクターに基づいてホストをスタイルします。上位のラッパーに付けたクラスに基づいてコンポーネントのテーマを設定する場合に便利です。ブラウザーの対応状況は良好ですが、対象ブラウザーの対応マトリックスで確認してください。

ドキュメント全体に適用する CSS リセット（body のマージンや box-sizing など）は、シャドウツリーには影響しません。必要なリセットを各シャドウルート内で再適用するか、構築したスタイルシートをすべてのコンポーネントに適用して共有してください。

Chrome DevTools の Elements パネルでは、シャドウルートが「#shadow-root (open)」として表示されます。他の CSS と同じように、:host 疑似クラスや ::part ルールを含め、シャドウスタイルを調査、編集、切り替えできます。

Shadow DOM は、両方向にスタイルをカプセル化します。:host でホストをスタイルし、継承される CSS カスタムプロパティでテーマ設定用のフックを公開し、::part で個別の要素をスタイル可能にします。adoptedStyleSheets でスタイルシートを共有し、ドキュメント全体の CSS は境界を越えないため、各シャドウルート内でリセットを再適用してください。