strategies for styling a reusable Polymer element

Question

I'm getting started with Polymer web components. We have a product that can be injected into multiple client applications, or could even be a standalone application. This product is a game where the rules for validating correct answers and the general flow are the same throughout all implementations. The only variance is styling so the game looks like it belongs in its surroundings.

I'm tempted to use some of the cool Polymer Paper elements for the UI aspects of the various custom elements, but I do not want to force a particular design aesthetic. So, I think it will be a better choice to simply have each custom Polymer element to return semantic HTML.

So, how can I allow the clients that are consuming the game to apply their own look and feel? In my research on Polymer, I've read about applying styles inside each element. I suppose that might be OK for structural issues. Does anyone have any strategies they've employed for custom CSS implementations for Polymer elements?

Thank you.

Answer 1

Custom CSS Properties is the suggested way of theming Polymer Elements. Here's a video from the polymer summit and another video of Rob Dodson talking about theming your elements using custom css properties.