Disable default Polymer CSS

Question

I built an application using Polymer and its working as intended. I'd like to style it with a totally custom look and feel.

Is it possible to disable default styling of Polymer elements via a flag or some roundabout way, or will I have to manually override everything I want to change?

Answer 1

To override an element's styles from the outside, you can use ::shadow and /deep/: http://www.polymer-project.org/articles/styling-elements.html#style-fromoutside

Those pierce through the Shadow DOM boundaries and allow you to target nodes internal to the element. Unfortunately, this means you need to explicitly write rules that target these nodes. This is sort of the deal with components...an author defines the look and feel, but you're welcome to override it as consumer/developer.

It's also worth noting that the visual elements use the non-visual core-*/polymer-* elements to get their job done. If you need a completely different UI, I'd create an element that reuses those core elements.