Perhaps the easiest thing to do here is to use property change observers and the `toggleClass` method to switch individual classes on or off. Or if the class list depends on a combination of properties, use a multiple-property observer. For example:
http://plnkr.co/edit/MtYDzf6IgI1P4kVULMmZ?p=preview This example dynamically updates the class based on a the values of the two checkboxes. I feel like the issue with reflectToAttribute on the class property is a bug. Cheers, Arthur On Wed, Apr 29, 2015 at 1:43 AM, Adrian Aioanei < [email protected]> wrote: > Is there a built in way to have a dynamic class specified for a custom > element? > There's two places in the documentation that refers to this approach: > > 1. reflectToAttribute, which can be specified like this: > properties: { > class: { > type: String, > computed: 'computeClass(var1, var2)', > reflectToAttribute: true > } > } > However this issues the following error: > Uncaught TypeError: Cannot read property '_xScopeSelector' of > undefinedPolymer.Base._addFeature._scopeElementClass @ > x-styling.html:265Polymer.Base._addFeature.serializeValueToAttribute @ > x-styling.html:279Polymer.Base._addFeature.reflectPropertyToAttribute @ > attributes.html:107Polymer.Base.extend.reflectEffect @ effects.html:33 > > 2. Another approach that I tried was using hostAttributes. This one works > with static values, but doesn't work with binding or computed values, like: > hostAttributes:{ > class: 'computeClass(var1, var2)' > } > > The workaround now is to have a div as the parent of all elements in the > template, and have a class property attached to it with data binding. > But is there a way to dynamically change an element's class? > > Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/e4d1866c-3d52-4c9f-a9d2-33e0f390e294%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/e4d1866c-3d52-4c9f-a9d2-33e0f390e294%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CADSbU_y6GzzwV5k%3DJNpRmhm%2B6ek%2BPB48VeaQTUHuv%2BHK68zOsA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
