Polymer attribute$ binding fails

[hotforfeature]

Using a polymer attribute inside Angular will fail, since attribute$ is not a valid attribute name and Angular uses Element.setAttribute() when creating the template.

Ex:

<!-- This is an Angular template declaring a Polymer template -->
<iron-list [items]="items">
  <ng-template polymer-template [modelHost]="this">
    <!-- Neither of these work -->
    <paper-item class$="[[getClass(item)]]">[[item]]</paper-item>
    <paper-item [attr.class$]="[[getClass(item)]]">[[item]]</paper-item>
  </ng-template>
</iron-list>

In this example, we're using [modelHost] referring to the Angular component, which has a getClass() property. We want to dynamically get the class for an element inside a Polymer template. If we want to bind the value to an attribute, we must use the attribute$ binding syntax.

The problem is this isn't "HTML", this is markup that Angular creates using the DOM programatically. So it will attempt to call paperItemEl.setAttribute('class$', '[[getClass(item)]]') which fails.

[hotforfeature]

For reference, a way around this specific use case (trying to bind to class attribute), would be this:

<iron-list [items]="items">
  <ng-template polymer-template [modelHost]="this">
    <paper-item class-name="[[getClass(item)]]">[[item]]</paper-item>
  </ng-template>
</iron-list>

This would set the className property, which has a similar effect. There may be other use cases where one would want to set an attribute in a Polymer template though. If it's not possible, it should be documented.