Changing CSS variables via JS in Polymer

Question

In my Polymer project, I have a toolbar with a color I want to change using JavaScript. Since Polymer uses the CSS variable — paper-toolbar-background internally for styling, I can't do something like style.color. I found a method named setProperty(), but it doesn't work for me. Has anyone already found a solution?

Answer 1

Set the variable value in the element's customStyle map then call the updateStyle method.

Here is an example of an element that changes its own visibility by modifying the value of a custom style that it defines. The variable can be external as well.

<dom-module id="my-elem">

  <style>
    :host {
      display: block;
      --my-elem-visibility: hidden;
    }
    #child {
       visibility: var(--my-elem-visibility)
    }
  </style>
  <template>
    <div id="child">Some content goes here.</div>
  </template>
</dom-module>

<script>
   Polymer({

      is: 'my-elem',

      setVisible: function (visible) {
          this.customStyle['--my-elem-visibility'] = 'visible';
          this.updateStyles();
      }
   });
</script>

Answer 2

To set the CSS variable for the current Polymer.Element:

this.updateStyles({'--paper-toolbar-background': '#ed0'});

To set the variable globally use:

Polymer.updateStyles({'--paper-toolbar-background': '#ed0'});

Answer 3

Basically,

1. Grab the element
2. Use the customStyle property to alter --paper-toolbar-background
3. Run element.updateStyles()

Please see the docs. [Edit] If you need an example, I've one here.