CSS: How to target ::slotted siblings in Shadow DOM root?

Question

I know that the spec currently only allows compound selectors for ::slotted, i.e. ::slotted(my-first + my-second) is not allowed, but should something like this

Answer 1

Sure you can select siblings of slots / slotted.

The thing you can not do is select a element which has been slotted and is not a top-level node.

Select siblings:

slot[name=] ~

Select slotted top-level node

::slotted()

A simple selector contains a tag/class/id/name etc. but must not have any combinators. Like for example.

.myClass OK

[[=]] OK

. > . NO

Examples

var element = document.querySelector('.templateMe');
var shadow = element.attachShadow({mode: 'open'});
var template = document.querySelector('.myTemplate');
shadow.appendChild(template.content.cloneNode(true));

  Im in Solt 1
  
    Im in Solt 2, im selectable.
    

      NOT selectable (because no top level node of slotted)!
    
  
  Im in Solt 2 too and selectable!