The Cat and the Hat CSS Selectors
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.
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
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, 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