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

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.

Tags:

Html

Css

Shadow Dom

Recent Posts