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 preventaccidental 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
chrome://flags
.
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) onCodePen
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) onCodePen
@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