Polymer: Bound data-* attributes being stripped from template children

[doliver-pulsemining]

In Polymer 1.0 Bound data-* attributes are not getting set on elements.
It applies to both custom and standard HTML elements.

This short example:

<dom-module id="div-test">
  <template>
    <div id="test_element" data-id="{{test}}" name="{{test}}">Some content</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'div-test',
    ready: function() {
      this.test = "div_val_id";
    }
  })

Produces the following (note the lack of the data-id attribute):

<div id="test_element" name="div_val_id">Some content</div>

The only way to get the data-* element on the div is with javascript:

ready: function () {
  this.test = "div_val_id";
  this.$.test_element.dataset["id"] = this.test;
}

This worked correctly in Polymer 0.5.

[kevinpschaaf]

In Polymer 1.0, the name="{{...}}" syntax indicates a _property binding_.

Also note that when binding to properties, dash-case names are converted to camelCase See Property name to attribute name mapping for details.

As such, your binding data-id="{{test}}" sets the dataId property on the element (which isn't anything a div).

In order to bind to dataset properties via data-* attributes, you need to use explicit attribute binding, which uses $= syntax: data-id$="{{test}}". That'll work for you.

This is covered in a bit more detail under Binding to native element attributes.

[doliver-pulsemining]

Thank you very much for clarifying.