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