Menu
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.
697
There's no selector that can directly affect shadow DOM styles from the document. But just as we expose methods to interact with our component, we can expose CSS variables (custom CSS properties) to style it.
Find the shadow root element: Check the shadow root's parent tag and get it using javascript. In this case, the shadow host tag is the div element <div id=”shadow_host"> . The executeScript() function will retrieve the shadow root. This code above works in both Selenium 3 and 4.
We can only access the shadow DOM by the reference returned by attachShadow (and probably hidden inside a class). Browser-native shadow trees, such as <input type="range"> , are closed. There's no way to access them.
In CSS, shadows on the boxes of elements are created using the box-shadow property (if you want to add a shadow to the text itself, you need text-shadow ). The box-shadow property takes a number of values: The offset on the x-axis. The offset on the y-axis.
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.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
