Dynamic class attribute on a host

[Adrian Aioanei]

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?

[Peng Kim]

{{your-data}}

[Adrian Aioanei]

What I'm trying to achieve is having a class attribute on the host element, not on an element within it.

[Arthur Evans]

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

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/e4d1866c-3d52-4c9f-a9d2-33e0f390e294%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.