How to set custom styling property of a Polymer extended Component?

Flow
1

I have a Java Polymer Component. It has a custom styling property (Example: --paper-icon-button-ink-color).
How do we set the value of this property from Java?

I thought of invoking the JavaScript method

this.updateStyles({ '--paper-icon-button-ink-color': 'green' })

But, this method is not available to call.

2

getElement().getStyle().set("--paper-icon-button-ink-color","green")

3

Artur, that won’t work for ShadyCSS (if you need to support IE11). You need to go through updateStyles.

4

What Artur suggested is working for me (Of course, I am not using IE!).
However, any idea why I can’t do the following?

getElement().callFunction("updateStyles({ '--paper-icon-button-ink-color': 'green' })");

I’m getting the following error on the browser:

(TypeError) : $0.updateStyles(...) is not a function

And, if I do:

getElement().callFunction("this.updateStyles({ '--paper-icon-button-ink-color': 'green' })");

I’m getting the following error on the browser:

(TypeError) : Cannot read property 'updateStyles' of undefined
5

If I remember correctly, the first argument to callFunction must be the method name only. Parameters can then be specified as additional arguments

6

Artur Signell:
If I remember correctly, the first argument to callFunction must be the method name only. Parameters can then be specified as additional arguments

Yes, you are right. I passed as additional parameters and it’s not showing any errors.

However, it is not getting effected. I can see that it’s being passed to the client (so, this is not a problem in Flow).

If I do getElement().getStyle().set(..., ...), I can see that the DOM is getting updated.