What do /deep/ and ::shadow mean in a CSS selector?

Question

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?

Answer 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.