Prevent polymer from setting sub-elements class to style-scope - polymer

Question

I'm having some trouble migrating to Polymer 1.0
My main problem is that the classes "style-scope" and "my-element" are being applied to every child node in the element. This is not a problem when using something like this:
<paper-dialog modal class="vertical layout">
<div class="top">
<div class="green">{{format(inputtext)}}</div>
It just changes their classes to "top style-scope my-element" and "green style-scope my-element" respectively and everything works ok.
But right now on Polymer 1.0 I can't bind a classname to a property, so I have to compute it with something like this:
<template is="dom-repeat" items="{{ item-list }}" as="item">
<span class="{{setitemclass(item)}}" on-click="itemClicked" role="button" >{{item}}</span>
</template>
setitemclass: function (item) {
return 'itnumb' + item;
}
As the element is created every span created goes through the setitemclass function and it returns what it should (something like 'itnumb1', 'itnumb2' and so on), but when it finishes, the class appears as "style-scope my-element" for every span, with no sigh of the 'itnumb#' bit anywhere.
I just don't know how to approach this, since binding has changed quite a bit in my eyes.
Thanks!

Answer 1

In order to bind to an attribute that does not match to a respective JS property of that element (e.g. class, href, data-*), you should use $= rather than plain =.
<span class$="{{setitemclass(item)}}" on-click="itemClicked" role="button">{{item}}</span>
Source: https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding