Style change programmatically

Question

I am trying to execute a Custom Property API for Polymer elements regarding updating the CSS properties (and styles) of an element programmatically, but It does not seem to work. Here is my current attempt:

<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">

<dom-module id="my-namecard">
  <style>
    :host {
      --color: green;
    }

    span {
      color: var(--color, orange);
    }
  </style>

  <template>
    <div>
      Hi! My name is <span>{{name}}</span>
    </div>
    <button on-click="redClick">Set text to Red</button>
    <button on-click="blueClick">Set text to Blue</button>
  </template>

  <script>
    Polymer({
      is: 'my-namecard',
      properties: {
        name: {
          type: String
        }
      },
      redClick: function() {
        console.log('Setting "--color" red');
        this.customStyle['--color'] = 'red';
        this.updateStyles();
      },
      blueClick: function() {
        console.log('Setting "--color" blue');
        this.customStyle['--color'] = 'blue';
        this.updateStyles();
      }
    });
  </script>
</dom-module>

<my-namecard name="Sean"></my-namecard>

I also tried not to set the CSS property and use a straightforward style, like this:

redClick: function() {
    console.log('Setting "color" red');
    this.customStyle['color'] = 'red';
    this.updateStyles();
}

I created a codepen demonstrating the problem

Answer 1

You have encountered a bug in the current version of Polymer, where a similar style change will apply to the child elements of Polymer, but not to the element itself. Cm:

https://github.com/Polymer/polymer/issues/1851

A workaround is to call Polymer.updateStyles()instead this.updateStyles().

codepen.