Safari bug when rendering a table using nested loops

[kmurph73]

JS Bin example

If I try to render a table using nested loops, like so:

<table>
  <template repeat="{{ row in rows }}">
    <tr>
      <template repeat="{{ cell in row }}">
        <td>{{cell}}</td>
      </template>
    </tr>
  </template>
</table>

it renders just fine in Chrome/FF, but not Safari (haven't tested IE). It seems to be specific to the tr/td tags -- if I turn them into divs, it renders in Safari. Thanks!

[sorvell]

This type of syntax is unsupported where the <template> element is polyfilled (this is only Safari and IE!). You'll need to use

<tr template repeat="{{ row in rows }}">

There's more info here: http://www.polymer-project.org/docs/polymer/databinding-compat.html#elements-that-cant-contain-a-template

[kmurph73]

Odd, when I change the JS Bin code to adhere to the compatibility recommendations, it breaks in FF and Safari. See here.

Interestingly it doesn't do this when I run an app locally using the same syntax. However, it does when I vulcanize said app!

I created a repo that reproduces the issue: https://github.com/shmay/polymer-td-repeat-issue

[sorvell]

@jmesserly John, would you mind taking a look at this one?

[sorvell]

The behavior now seems broken in Chrome as well: http://jsbin.com/litosoyepina/4/edit

[sorvell]

The above breakage is only on master and I think it's due to TemplateBinding now being loaded after DOMContentLoaded. Let me sort that part out.

[sorvell]

OK, identified the problem. It's currently possible for Polymer to attempt to stamp a template before the TemplateBinding library has decorated the template. We'll get this fixed in the next release, but until then I can give you a workaround. You'll need to implement the instanceTemplate method on your element like so:

instanceTemplate: function(template) {
  HTMLTemplateElement.decorate(template);
  return this.super(arguments);
}

Here's a jsbin that works:

http://jsbin.com/litosoyepina/6/edit

[sorvell]

We now ensure the template is properly decorated before stamping shadowRoot. Fixed via googlearchive/polymer-dev@73801fc.

[kmurph73]

Excellent, thank you!