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

/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

: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

: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

::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