Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CustomStyle change has no effect #1851

Closed
alex88 opened this issue Jun 12, 2015 · 7 comments
Closed

CustomStyle change has no effect #1851

alex88 opened this issue Jun 12, 2015 · 7 comments
Assignees
Labels

Comments

@alex88
Copy link

alex88 commented Jun 12, 2015

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 Jun 12, 2015
@sorvell
Copy link
Contributor

sorvell commented Jun 12, 2015

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
Copy link

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
Copy link

binggg commented Jun 16, 2015

(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
Copy link

binggg commented Jun 16, 2015

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
Copy link

@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 Jun 17, 2015
sorvell pushed a commit that referenced this issue Jun 19, 2015
…t changes to customStyle are recognized.

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

ghstahl commented Oct 15, 2015

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
Copy link
Contributor

sorvell commented Nov 11, 2015

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
Labels
Projects
None yet
Development

No branches or pull requests

5 participants