Search code examples
csshtmlshadow-dom

CSS selector for shadow root or all top level elements in shadow root

I need a selector for usage in css inside a shadow root, which selects all children (but not grand children) of the shadow root, no matter what tag they are and without giving them an ID.

In the example below, SPAN,A,P and DIV should get a red border, but SPAN IN DIV not.

<my-element>
  #shadow-root
    <span>SPAN</span>
    <a>A</a>
    <p>P</p>
    <div>
      DIV
      <span>SPAN IN DIV</span>
    </div>
    <style>
      :root>*{border:1px red solid;}
    </style>
</my-element>

I hoped, the :root-Selector would do the job inside of a shadow dom, but thats not the case.

It would also be a possible solution if someone shows how to set an ID on the shadow root.

Update:

Tried using #shadow-root > * as selector:

seems not to work. Probably it is just google chrome developer tools visualizing the shadow root element like that.

Solution

  • Use this selector: :host > *

    The :host selector is described in https://drafts.csswg.org/css-scoping/#host-selector

    document.querySelector( 'my-element' )
  .attachShadow( { mode: 'open' } )
  .innerHTML = `
    <span>SPAN</span>
    <a>A</a>
    <p>P</p>
    <div>
      DIV
      <span>SPAN IN DIV</span>
    </div>
    <style>
      :host>*{border:1px red solid;}
    </style>`
    <my-element>
</my-element>

    :host may also hold a compound selector, which must be places in brackets. E.g. :host([foo=bar]) selects a host element which has attribute foo set to bar.