How can an external stylesheet be used to style Polymer 1.0 elements?

13
votes

Polymer 1.0 elements contain custom CSS variables that allow you to style them using inline styles as such:

<style is="custom-style">
  paper-toolbar {
    --paper-toolbar-color: blue;
  }
</style>

This works and is fantastic. How can I accomplish the same, but using an external stylesheet? Adding is="custom-style" to the link tag does not seem to have any effect, as the following does not work:

<link rel="stylesheet" media="all" href="app.css" is="custom-style">
1
csspolymerpolymer-1.0

1 Answers

12
votes

You can load the HTML file containing your custom-style like you would with a polymer element:

<link rel="import" href="my-custom-style.html">

And your my-custom-style.html file would contain:

<style is="custom-style">
    paper-toolbar {
        --paper-toolbar-color: blue;
    }
</style>

As of Polymer 1.1, this feature is now deprecated. See here for an update answer