ShadowDOMのカプセル化を破る「継承プロパティ」

Last updated at 2025-10-26Posted at 2025-10-26

対象読者 👤

まとめ 💡

背景

ページの上にShadowDomで表示していたモーダルのテキストがデフォルトの左寄せではなく、中央揃えになっていました。
調べていたところ、ShadowHostのcssを継承していたことが原因だとわかりました。

カスタム要素をページで実行されるJavaScriptやCSSの影響を受けないようにする（カプセル化する）為に使われる技術です。

ページ上に表示するモーダルでこの技術を使ったりします。
それ以外だと例えばinput要素の日付を入力する要素の内部構造に使われたりします。

ShadowDomのDomツリーと紐ついている通常のDomです。

背景で説明した以下について説明します

ページの上にShadowDomで表示していたモーダルのテキストがデフォルトの左寄せではなく、中央揃えになっていました。
調べていたところ、ShadowHostのcssを継承していたことが原因だとわかりました。

body要素がShadowHostである場合に以下のCSSがbody要素にあたっていました。

body {
  text-align: center;
}

これがShadowDom内のp要素にあたってしまっていました。

CSSにおける継承
ある要素のあるプロパティに値が指定されなかった場合に親要素の値を継承します。
全てのプロパティに継承があるというわけではなく、継承可能なプロパティとして定義されています。

text-alignは継承可能なプロパティです

継承可能なプロパティであることの確認の仕方
MDNの公式定義の「継承」が「あり」になっていれば継承可能なプロパティです。

ShadowHostである要素にこの継承プロパティのCSSが当たっているある場合、ShadowDom内の要素はCSSを継承することが以下の記事でもわかりました。

Shadow DOM は body セレクタに指定された、継承プロパティの値のみ反映されているのがわかります

よって今回のケースだとShadowDom内の要素がbodyに当たっているCSSのうち継承可能なプロパティを継承していたことが分かりました。

body要素に限らずdiv要素だったりShadowHostになりうる要素でも今回のようなCSSの継承は起こります。
例えば<article>,<aside>,<blockquote>,<div>,<footer>,h1などです。
参考

:hostを使って、styleを当てることにしました。

:host {
  text-align: left;
}

これにより、ShadowDom要素全体にこのCSSを当てることができます。

そもそもの話ですが、ShadowHostをbodyのようなCSSが当たりやすいものではない別の要素にすることも考えるべきだと思いました。