In looking at Polymer, I see the following CSS selector in the Styles tab of Chrome 37's developer tools:
I've also seen a selector with pseudo selector ::shadow
.
So, what do /deep/
and ::shadow
in a CSS selector mean?
As Joel H. points out in the comments, Chrome has since deprecated the /deep/
combinator, and it gives a syntax error in IE.
HTML5 Web Components offer full encapsulation of CSS styles.
This means that:
However sometimes you want to have page-level rules to manipulate the presentation of component elements defined within their shadow DOM. In order to do this, you add /deep/
to the CSS selector.
So in the example shown, html /deep/ [self-end]
is selecting all elements under the html
(top level) element that have the self-end
attribute, including those buried inside web components' shadow DOMs roots.
If you require a selected element to live within a shadow root, then you can use the ::shadow
pseudo selector on its parent element.
Consider:
<div>
<span>Outer</span>
#shadow-root
<my-component>
<span>Inner</span>
</my-component>
</div>
The selector html /deep/ span
will select both <span>
elements.
The selector ::shadow span
will select only the inner <span>
element.
Read more about this in the W3C's CSS Scoping Module specification.