CSS3

例えば、次の様な［子たち、および shadow ツリー］を伴う部品があるとする：

<x-foo>
  <div id="one" slot="foo" class="foo">...</div>
  <div id="two" slot="foo">...</div>
  <div id="three" class="foo">
    <div id="four" slot="foo">...</div>
  </div>
  <“shadow ツリー”>
    <div id="five">...</div>
    <div id="six">...</div>
    <slot name="foo"></slot>
  </“shadow ツリー”>
</x-foo>

shadow ツリーの中のスタイルシートにおいては、選択子 ::slotted(*) は、［#one、#two］のみを選択する ― それらはもっぱら SLOT 要素に あてがわれる要素なので。それは、slot 属性を有さない #three は選択しない。また、#four も選択しない（slot にあてがわれるノードは、shadow ホストの（直な）子に限られるので）。

一方で、::slotted(.foo) の様な選択子は、［#one、#two］のうち .foo に合致する前者のみを選択する。

注記： ::slotted(*) の様な選択子は、*::slotted(*) と等価になる ― 先頭の * は、SLOT 要素の他にも多数の要素を選択するが、slot になるのは SLOT 要素に限られるので、合致するのは ::slotted() 疑似要素に合致する要素に限られる。