Polymer 1.0 adding attributes to child doms in a repeat - polymer

Question

I have this structure, and I want to bind , say custom attributes or non-standard attributes like for or some-new-attribute to child doms created by a dom-repeat template. How do i achieve this?
<dom-module id="card-list">
<template>
<li>Some Text</li>
<template is="dom-repeat" items="{{items}}" >
<li id="{{ item.text }}" for="{{ item.text }}">{{ item.text }}</li>
</template>
</template>
<script>
Polymer({
is: "card-list",
extends:"ul",
ready: function() {
this.items = magically_get_an_array_of_objects();
},
});
</script>
</dom-module>
If magically_get_an_array_of_texts function returns this array of objects
[
{text:"foo"},
{text:"bar"}
]
The resulting template would be this
<ul is="card-list">
<li>Some Text</li>
<li id="foo">foo</li>
<li id="bar">bar</li>
</ul>
Notice how the for attribute did not get binded.
Question
How do you bind to attributes to child doms, specifically when they are looped?

Answer 1

You could simply use binding to native element attribute.
for$="{{ item.text }}"

Answer 2

Your version will set a property. It will not show up in the HTML, as you noticed, but it will be available as property. document.querySelector("#foo").for will print foo.
If you want to use custom attributes, you will need to extend the <li> element, define the for attribute and set reflectToAttribute to true.
<script>
Polymer({
is: "card-li",
extends:"li",
properties: {
for: {
type: String,
reflectToAttribute: true
}
}
});
</script>
And then use it like this.
<li is="card-li" id="{{ item.text }}" for="{{ item.text }}">{{ item.text }}</li>