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

Question

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">

Nannie

Answer 1

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

Punctual

This is the pattern the Polymer team is using for their Paper elements: github.com/polymerelements/paper-styles – Husha

But what do you do if you use meteorjs for example, where it takes every css files and concatenates them into one automatically? You have no influence on how the style tag is written in meteor, nor can you import a custom html file with the css (well you could but that means you generate more http requests ofc) – Virtues

Please note this method is now deprecated in Polymer 1.1 (polymer-project.org/1.0/docs/devguide/…). Have a look at my answer (#32299000) to this question. – Americaamerican

Thanks for pointing that out JustinXL. I'll put the link in my answer. – Punctual