Change paper-input error color dynamically

Question

I have a paper-input element which is colored red when the input is empty to mark an error has happened, but I want this same element to be orange when the user enter an invalid string to make it look like a warning.

I know I can change the color using the predefined properties like this:

paper-input {
  --paper-input-container-invalid-color: orange;
}

But this coloring is applied to any error/invalid state.

Is there a way to change this color dynamically depending on the error type?

Answer 1

I found a way to do it, using updateStyles function of Polymer:

Polymer.updateStyles({'--paper-input-container-invalid-color': 'new_color'});

Answer 2

You can create a custom CSS class and then apply it using for example this.$.myInput.classList.add('error').

Or in this case (Polymer 1.0): Polymer 1.0 - Binding css classes