CODEWITHSUNDEEP
csspolymerpolymer-1.0
David Smith
David Smith

Reputation: 39744

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

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

Upvotes: 13

Views: 8157

Answers (1)

Ben Thomas
Ben Thomas

Reputation: 3200

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

Upvotes: 12

Related Questions