Search code examples
polymerdart-polymer

Best practices for applying consistent styles across all related Polymer elements?


So say I have an app with a bunch of Polymer elements. These elements have inputs and buttons and whatnot, and I want them all to have a consistent style. As they're individual encapsulated elements, the natural approach is to style these HTML elements in each individual Polymer element (side note: it's funny calling them HTML elements when they're themselves in Polymer elements, which might be why Web Components are a better eventual name for them) which basically means I'm repeating the same styles multiple times.

Is there a better approach? I suppose I can leave basic or even default browser styles on those inputs and buttons and then do some top level styling that drills down into the ::shadows?


Solution

  • I think the core-style element is meant to solve that problem (http://www.polymer-project.org/docs/elements/core-elements.html#core-style), quote from the element's page:

    The core-style element helps manage styling inside other elements and can be used to make themes. The core-style element can be either a producer or consumer of styling. If it has its id property set, it's a producer. Elements that are producers should include css styling as their text content. If a core-style has its ref property set, it's a consumer. A core-style typically sets its ref property to the value of the id property of the core-style it wants to use. This allows a single producer to be used in multiple places, for example, in many different elements.