Skip to content

Loading…

CustomStyle change has no effect #1851

Closed
alex88 opened this Issue · 7 comments

5 participants

@alex88

Looking at https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api I thought that this example should work:

http://jsbin.com/ciyomuruha/1/edit?html,output

In the example I expected that the background turns blue after clicking on that button.

@sorvell sorvell added the p1 label
@sorvell
Owner

Yes, that's a bug and it should work. Thanks for finding the issue. Calling this.updateStyles() will successfully update any local children, but the element itself may not be updated. We'll work on a fix. In the meantime, as a workaround, you can force the enclosing scope to update, see for example:

http://jsbin.com/cupifi/2/edit

@Nick-Ewer

I get this error when I call Polymer.updateStyles()
Uncaught TypeError: Cannot read property 'clear' of undefined
I can see using console.logs that my values are changing, they just aren't updating.

@binggg

(this.domHost || Polymer).updateStyles();
when I use it in a event handle function, it seems work.
But when I use it in ready function or observer function , both didn't work.
Get this error
Uncaught TypeError: Cannot read property 'clear' of undefined

@binggg

Use this.async() can fix the error Uncaught TypeError: Cannot read property 'clear' of undefined.
Like this :

this.async(function(){
    this.customStyle['--theme-color'] = this.themecolor;
    (this.domHost || Polymer).updateStyles();
});
@Nick-Ewer

@binggg I figured it out last night, I was calling the function that ran "Polymer.updateStyles()" in my ready function. Once I took it out it worked fine. I didn't need it in my ready anyways, it was just there for testing, but I'm pretty sure your async fix would have worked if I had needed it in my ready function still. Thanks!

@sorvell sorvell self-assigned this
@sorvell sorvell referenced this issue from a commit
@sorvell sorvell Fixes #1851: Include `customStyle` in the style host cache key so tha…
…t changes to customStyle are recognized.

Fixes #1915: Include a `customStyleProperties` argument to `updateStyles` for convenience.
6bc360d
@ghstahl

In what part of the startup pipeline will updateStyles work.

http://jsfiddle.net/ghstahl/6w8sajnt/8/

I have a jsFiddle where I set my paper-button class via a compute and that happens before ready. However the styling doesn't take until I call updateStyles after ready();

The expected behavior I want is that my button shadow is red because I have set the is-hot style before ready is called.

@sorvell
Owner

Custom styles are applied when an element is attached to the dom. This should work: http://jsfiddle.net/qur1y8nt/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.