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
polyfill-next-selector. But the selectors themselves are all native and comply to the current draft spec.
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.
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.
03/18/2014: This post is now out of date. The cat and hat CSS selectors have been removed in favor of
/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.
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.
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 :)