CSS3

疑似クラス

:host、:host()

→●、mdn（:host、:host()）

light ツリーの中への選択。

:host 疑似クラスは、shadow ツリーの文脈下では，当の shadow ツリーをホストしている shadow ホストに合致するように評価され、他の文脈下では、何にも合致しない。

<compound-selector> 合体選択子 ●

それは、shadow ツリーの文脈下では、当の shadow ツリーをホストしている shadow ホストであって、かつ［通常の文脈下で引数の選択子（合体選択子）にも合致する］ものに合致するように評価される。他の文脈下では、何にも合致しない。

:host の詳細度は、疑似クラスのそれとする。:host() の詳細度は、疑似クラスのそれに引数の詳細度を足したものになる。

注記： これは、:is() や :not() の様な、類似するが引数の詳細度しかとらない疑似クラスの詳細度とは異なる。そのわけは、:host が、“通常の”疑似クラスの様に独力で【すなわち、引数なしでも】要素を選択するからである ― それは構文上の理由から引数に選択子をとるが（:host.foo に合致するなら .foo にも合致させる必要がある）、他の点では、単に、ある選択子が後続している :host を利用することに一致する。【:host.foo は :host と .foo の論理積を表すが、.foo 単体では shadow ツリーの外にあるものに合致できない。】

<x-foo class="foo">
  <“shadow ツリー”>
    <div class="foo">...</div>
  </“shadow ツリー”>
</x-foo>

¶省く

以下のCSSが組み込んであります：

<x-foo class=foo>
 <“shadow ツリー”>
  <DIV class=foo>DIV</DIV>
 </“shadow ツリー”>
</x-foo>

テスト