13

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">
David Smith
  • 38,044
  • 11
  • 44
  • 61

1 Answers1

12

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

Ben Thomas
  • 3,180
  • 2
  • 20
  • 38
  • 1
    This is the pattern the Polymer team is using for their Paper elements: https://github.com/polymerelements/paper-styles – Zikes Jun 26 '15 at 17:57
  • 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) – Andreas Galster Jul 16 '15 at 01:05
  • 1
    Please note this method is now deprecated in Polymer 1.1 (https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets). Have a look at my answer (http://stackoverflow.com/questions/32298500/polymer-import-theme-file-with-host-in-styles-has-no-affect/32302856#32302856) to this question. – Justin XL Aug 31 '15 at 01:46
  • 1
    Thanks for pointing that out JustinXL. I'll put the link in my answer. – Ben Thomas Nov 17 '15 at 09:35