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

Question

I'm building a menu with a dom-repeat template like 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 is not filled though in the generated DOM:

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

It seems that the template only renders "normal" attributes like href. Am I'm missing something? Thanks.

Sounds like you can use any custom attribute: polymer-project.org/0.5/docs/polymer/polymer.html#defaultattrs — putvande
– putvande, Commented Jun 25, 2015 at 11:21

vasek · Accepted Answer · 2015-06-25 11:24:32Z

2

To bind to an attribute, use $= rather than =. This results in a call to:

element.setAttribute(attr, value);

As opposed to:

element.property = value;

(source)

So in your case:

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

answered Jun 25, 2015 at 11:24

vasek

3412 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related