Shadow DOM CSS Cheat Sheet

This guide is my attempt to track the progress of all the new CSS selectors which affect the Shadow DOM. I've written this from the perspective of someone who uses Polymer so in a few places I point out polyfill features like shim-shadowdom and polyfill-next-selector. But the selectors themselves are all native and comply to the current draft spec.

Found a bug? Submit a pull request!

Follow @rob_dodson on the twitters




::shadow

Selects shadow trees that are one level deep inside of an element. Will need to be combined with shim-shadowdom directive if used outside of a Polymer element in browsers that lack support for the native selector.

x-foo::shadow h1 {  
  color: red;
}

Try it on CodePen | Read the Spec

Support Type Chrome Firefox Internet Explorer Safari Opera
Polyfill Yes Yes 10+ 6+ Yes
Native 35 ? ? ? ?




/deep/

Selects shadow trees that are N levels deep inside of an element. Will need to be combined with shim-shadowdom directive if used outside of a Polymer element in browsers that lack support for the native selector.

x-foo /deep/ h1 {  
  color: red;
}

Try it on CodePen | Read the Spec

Support Type Chrome Firefox Internet Explorer Safari Opera
Polyfill Yes Yes 10+ 6+ Yes
Native 35 ? ? ? ?

Note: The spec for the /deep/ combinator has recently been updated such that the syntax is now >>>. However, as of this time, the new syntax has not landed in any browsers. Related Chromium ticket.




:host

Selects a shadow host element. May contain additional identifiers in parenthesis.

:host(.fancy) {
  display: inline-block;
  background: purple;
}

Try it on CodePen | Read the Spec

Support Type Chrome Firefox Internet Explorer Safari Opera
Polyfill Yes Yes 10+ 6+ Yes
Native 35 ? ? ? ?




:host-context

Selects a shadow host based on a matching parent element.

:host-context(.blocky) {
  display: block
  background: red;
}

Try it on CodePen | Read the Spec

Support Type Chrome Firefox Internet Explorer Safari Opera
Polyfill Yes Yes 10+ 6+ Yes
Native 35 ? ? ? ?




::content

Selects distributed nodes inside of an element. Needs to be paired with polyfill-next-selector for browsers that do not support the native selector.

::content h1 {
  color: red;
}

Try it on CodePen | Read the Spec

Support Type Chrome Firefox Internet Explorer Safari Opera
Polyfill Yes Yes 10+ 6+ Yes
Native 35 ? ? ? ?