Clarification on use of template repeat for <tr> & <select>

[beriberikix]

I'm putting together a simple data table and was directed to this FAQ on using <tr> elements. Could someone expound on why these elements are different and the importance of the different setup?

Thanks!

[dfreedm]

Until the addition of the <template> element, <select> and <table> had special parser rules that prevent anything other than <option> and <tr> from being children respectively.

Trying to use other elements would result in them becoming unexpected siblings!

Therefore, the HTMLTemplateElement polyfill in the TemplateBinding library has the ability to use an <option> or <tr> as a template in these situations.

@ebidel It should probably be noted that browsers with native <template> support will allow for <template> to be a child element of <select> and <table>.

[beriberikix]

So I should change

<thead>
  <tr>
    <template repeat="{{ header in thead }}">
      <th>{{header}}</th>
    </template>
  </tr>
</thead>

to

<thead>
  <tr>
    <th  template repeat="{{ header in thead }}">{{header}}</th>
  </tr>
</thead>

[ebidel]

For best compatibility, we should recommend the second (polyfill) case? Does the first work in a non supported browser (Safari). Genuinely asking. I'm on my mobile.

[beriberikix]

No workie on Safari

[beriberikix]

The correct syntax that works in Safari:

<table>
  <template if="{{ thead }}" >
    <thead>
      <tr>
        <th template repeat="{{ header in thead }}">{{header}}</th>
      </tr>
    </thead>
  </template>
  <tbody>
    <tr template repeat="{{ tr in tbody }}">
      <td template repeat="{{ td in tr }}">{{ td }}</td>
    </tr>
  </tbody>
</table>

[dfreedm]

@ebidel I'll defer to @rafaelw on the docs question :)

@beriberikix 👍

[rafaelw]

You guys sorted it out correctly. Browsers which don't support <template> will lift any unexpected elements (including <template>) out of certain contexts. These include children of table, tbody, tr, select, etc...

TemplateBinding supports 'semantic templates' for all of theses elements: https://github.com/Polymer/TemplateBinding/blob/master/src/TemplateBinding.js#L117

The docs should be clear that using templates in these locations should prefer the "semantic" version, unless all target browsers implement native template.

[ebidel]

Beefed up the section on this in the FAQ: Polymer/old-docs-site@f13b54a