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.

Setting Up Bower and Polymer

So, you’re ready to dive into Polymer but you’re not so sure about this whole Bower thing. Have no fear! In this short screencast I’ll walk you through installing Bower, creating a project with the bower init command, and building your first Polymer element.

@font-face Doesn’t Work in the Shadow DOM

I was building custom elements with Polymer the other day, and I thought it would be cool to include Font Awesome for some sweet icon goodness. Everything was going great, until I switched over to Canary to check my work.

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.

Repeating Templates in Polymer

I ran into a little issue this afternoon working with templates in Polymer and I wanted to quickly jot down my thoughts in case others bump up against this.

Web Components Revolution

The slides from my talk and workshop titled Web Components Revolution are now live! Please be sure to view them using Chrome Canary and follow the instructions to enable any flags that you might need in order to properly experience native Web Components. The talk and the workshop were serious labors of love and I hope you all enjoy the slides :)


Web Components Revolution!