The Cat and the Hat CSS Selectors

03/18/2014: This post is now out of date. The cat and hat CSS selectors have been removed in favor of ::shadow and /deep/. Take a look at the CSS Scoping Draft Spec for current selector status.

One of the trickier aspects of encapsulating Shadow DOM CSS is figuring out how much access the parent document should have. Initially it was thought that the Shadow DOM’s author would decide which elements could be exposed for styling by using part attributes, but it seems like that might be too limiting. The thinking now is that the shadow boundary should prevent accidental styling of the shadow DOM, but allow intentional styles. That’s where the new “cat” and “hat” CSS selectors come in.

Support

In order to try the examples I suggest you use Chrome Canary v33 or greater.

Also make sure you’ve enabled Experimental Web Platform features in Chrome’s chrome://flags.

The Hat

The hat selector, a single caret ( ^ ), allows the parent document to pierce the upper shadow boundary and style elements that are one shadow root deep. If you have an element that only has one shadow root you can style pretty much anything inside of it using the hat.

See the Pen Shadow DOM “Hat” CSS selector by Rob Dodson (@robdodson) on CodePen

The Cat

The cat, a double caret ( ^^ ) is much more powerful. It allows you to pierce every layer of the shadow DOM, so if you have shadow DOM within shadow DOM (a common occurrence when you nest custom elements) you can style all of them at once.

See the Pen Shadow DOM “Cat” CSS selector by Rob Dodson (@robdodson) on CodePen

Styling Native Elements

@Volker_E asked if the cat and hat selectors could be used to style the shadow DOM of native elements like <video>. As it turns out that does work, which is pretty cool.

See the Pen Shadow DOM “Cat” and “Hat” CSS selectors by Rob Dodson (@robdodson) on CodePen