‘Allo!
In this video I show you how to setup your first Polymer project using the new Yeoman generator, how to create an element with a subgenerator, and how to run some Mocha tests. Let Yeoman do the heavy lifting, and make app building a breeze!
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.
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 ::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.
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.