85

In looking at Polymer, I see the following CSS selector in the Styles tab of Chrome 37's developer tools:

enter image description here

I've also seen a selector with pseudo selector ::shadow.

So, what do /deep/ and ::shadow in a CSS selector mean?

Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
  • Related: [What is the ::content pseudo-element and how does it work?](http://stackoverflow.com/questions/27622605/what-is-the-content-pseudo-element-and-how-does-it-work) Not suggesting as dupe since, while I believe the answer there is more comprehensive, the Q&A here was posted earlier and the answer is also good. – TylerH Mar 11 '16 at 15:50

1 Answers1

95

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.

RJFalconer
  • 10,890
  • 5
  • 51
  • 66
Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
  • Whats about browser components that actually can by styled via vendor-prefixes like `input::-webkit-slider-thumb`. Could i select this *slider thumb element* like this: `html /deep/ button[offset]` under the assumption it would be an element of type `button` and had the attribute `offset`. (This is just an non-sense example). [Here is an jsfiddle, just using the default css way to select it](http://jsfiddle.net/gunf7vbv/2/) – Nico O Sep 01 '14 at 16:51
  • 2
    @NicoO, interesting. I played a little with your jsfiddle just now (the site was down for me last night when you commented) and I can't seem to get the `::shadow` pseudo-selector to work for the user agent's shadow DOM. Using `/deep/` did work though. – Drew Noakes Sep 02 '14 at 09:25
  • Thank you so much for your feedback. That sounds very interesting. [Here is an updated version of the jsFiddle](http://jsfiddle.net/gunf7vbv/5/) using `/deep/` to get rid of all `
    ` elements (which the *slider thumb* seems to be). This only working with chrome at the moment. I feel a need for a caniuse.com page for this kind of selector, since it could lead to much more control about elements maybe even for `` and `
     – Nico O Sep 02 '14 at 09:54
  • 2
    @NicoO doesn't appear to work in chrome anymore... the standard is changed so [>>> is the new /deep/ combinator](https://drafts.csswg.org/css-scoping-1/#deep-combinator). and that also does not target the shadow dom. – northamerican Aug 18 '15 at 17:52
  • 13
    Note that around 2015-2016, the /deep/ combinator was deprecated by Chrome. Also, using it in IE will give you a syntax error. – Joel H. Feb 06 '17 at 13:11
  • @JoelH. thanks. That seems important enough to update the post. – Drew Noakes Feb 06 '17 at 14:18
  • 9
    ::shadow is depracated too – Supersharp Dec 02 '17 at 19:33
  • 2
    Interesting read: [The New Angular ::ng-deep and the Shadow-Piercing Combinators Drop](https://hackernoon.com/the-new-angular-ng-deep-and-the-shadow-piercing-combinators-deep-and-drop-4b088dbe459) – spottedmahn May 03 '18 at 13:37
  • https://developers.google.com/web/updates/2017/10/remove-shadow-piercing – Nikolay Mar 01 '19 at 13:16