Dynamic binding of 'required' attribute in Polymer does not affect style

Question

I am using paper-input Polymer element in a form and changing its 'required' attribute dynamically, like this:

<paper-input required$="[[isRequired]]" label="Required attr. bound"></paper-input>

For required inputs, I define slightly different style to make them more visible on page, like this:

  paper-input[required] {
    --paper-input-container-label: {
      color: green;
    }
    ;
    --paper-input-container-label-floating: {
      font-weight: bold;
      color: green;
    }
    ;
    --paper-input-container-underline: {
      border-bottom: 2px solid green;
    }
  }

Attribute binding works well in a sense that 'required' attribute is properly set and behaves as expected in form, but problem is that element is not properly styled when attribute is set.

On the other hand, when setting 'required' attribute without binding, style is properly applied:

<paper-input required label="Required set directly"></paper-input>

Dynamic binding done in a same way on 'disabled' attribute works as expected. For better understanding, I created jsfiddle to illustrate problem:

https://jsfiddle.net/dstefanox/h6xz9usn/3/

I tried also changing attribute in a imperative way, but results are the same - style does not change. Any ideas how to solve this problem?

Answer 1

In your CSS, you are using Polymer's custom property shim. For example here: --paper-input-container-label Unfortunately, these custom CSS properties are not re-evaluated automatically when the property changes. Here's what the documentation says on this topic:

Polymer's custom property shim evaluates and applies custom property values once at element creation time. In order to have an element (and its subtree) re- evaluate custom property values due to dynamic changes such as application of CSS classes, etc., call the updateStyles method on the element. To update all elements on the page, you can also call Polymer.updateStyles.

So essentially you need to manually watch for changes of isRequired and call either this.updateStyles on your element or Polymer.updateStyles.