CSSでShadow rootの有無を検知したい。

要素がShadow hostかどうか知りたいときの例

<li>
  <div id="widget">
    <script src="..."></script>
    <script src="..."></script>
  </div>
</li>

上記のようなマークアップで、#widget内部にサードパーティウィジェットが埋め込まれるとします。

この時、#widget内部のDOM構造が変化するならば、次のようにスタイリングすることでハンドリングできそうです。

li:has(#widget > script:first-child + script:last-child) {
  display: none;
}

一方で、#widget内部にShadow DOMが展開されるケースでは、Light DOM（通常のDOM）は変化しないため、現状のCSSだけだと検知できません。

そこで、要素がShadow hostかどうか（＝Shadow DOMを持っているか）を判定するセレクタがあればいいなと思い、調べてみました。

既存のプロポーザル

これについての議論は、2018年にはCSS Working Group上で始まっていました。

• [css-selectors] new pseudo class that matches shadow hosts #2908

• [css-scoping] :has-shadow pseudo-class #11007

2つのIssueがありますが、いずれも「Shadow rootを持つ要素に外側からマッチするセレクタが欲しい」というものです。CSS目線のユースケースが議論されていなさそうだったため、今回の件をコメントに残しておきました。

エッジケースではあると思いますが、議論の助けになれば嬉しいです。

余談

/* `::shadow-root`がhas-allowedな疑似要素として実装されたケースを想定 */
li:not(:has(#widget::shadow-root)) {
  display: none;
}

li:not(:has(#widget:has-shadowroot)) {
  display: none;
}

筆者は直前まで::shadow-rootが好みでしたが、記事執筆時点の現在は:has-shadowrootを推したいと思います。

Shadow root自体を表す擬似要素セレクタが誕生したとしても、外側からはスタイリングできない（はず）です。それならば、Shadow hostがあるかどうかの状態を表すだけの擬似クラスセレクタのほうがシンプルだと思いました。:has-slotted擬似クラスとも一貫性を感じますね。

まもなくこの議論も10年。はたして、あと2年で話は進んでいくのでしょうか。2年後が楽しみです。