Shadow DOM CSS Cheat Sheet

Author's Note: This post was originally written in April 2014 and since then a lot has changed with Shadow DOM CSS. I've updated the post to reflect the current state of things as of March 2016.

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 Custom Properties (CSS Variables) and @apply. But the selectors themselves are all native and comply to the current draft spec.

:host

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

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

Try it on JS Bin | 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 JS Bin | Read the Spec

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


::content (renamed to ::slotted)

Selects distributed nodes inside of an element. ::content was renamed to ::slotted but as of yet no browser has shipped the renamed version.

/* Current implementation in Chrome */
::content h1 {
  color: red;
}

/* Upcoming implementation in Chrome and Safari */
::slotted h1 {
  color: red;
}

Try it on JS Bin | Read the Spec

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


Custom Properties

Exposes a custom property (a.k.a. CSS variable) to be styled from the outside. Polymer will polyfill support for custom properties in style tags marked as <style is="custom-style">.

h1 {  
  color: var(--header-color, green);
}

Try it on JS Bin | Read the Spec

Support Type Chrome Firefox Internet Explorer Safari Opera
Polyfill Yes Yes 10+ 6+ Yes
Native 49 43 ? 9.1 36


CSS Mixins

Exposes a CSS mixin for styling several properties at once. Polymer will polyfill support for CSS mixins in style tags marked as <style is="custom-style">.

h1 {  
  @apply(--header-styles);
}

Try it on JS Bin | Read the Spec

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


::shadow (deprecated)

Selects shadow trees that are one level deep inside of an element. ::shadow shipped in Chrome 35 but has since been deprecated and is destined to be removed once its usage drops to an acceptably low number.

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

Try it on JS Bin | Read the Spec

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


/deep/ (deprecated)

Selects shadow trees that are N levels deep inside of an element. /deep/ shipped in Chrome 35 but has since been deprecated and is destined to be removed once its usage drops to an acceptably low number.

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

Try it on JS Bin | Read the Spec

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