polymer - Using custom data-* attributes inside HTML5 <template> tag -

i'm building menu dom-repeat template this:

        <template is="dom-repeat" items="{{appletsmenu}}">               <a data-route="{{item.dataroute}}" href="{{item.href}}">                 <iron-icon icon="{{item.icon}}" src="{{item.iconsrc}}" ></iron-icon>                 <span>{{item.name}}</span>               </a>         </template> 

the data-route attribute not filled though in generated dom:

<a href="...">...</a> <a href="...">...</a> 

it seems template renders "normal" attributes href. i'm missing something? thanks.

to bind attribute, use $= rather =. results in call to:

element.setattribute(attr, value); 

as opposed to:

element.property = value; 

(source)

so in case:

<a data-route$="{{item.dataroute}}" href="{{item.href}}">