问题
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?
回答1:
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:
- styles defined within a component cannot leak out and effect the rest of the page
- styles defined at the page level do not modify the component's own styles
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.
来源：https://stackoverflow.com/questions/25609678/what-do-deep-and-shadow-mean-in-a-css-selector