<template> polyfill in Safari/WebKit not correctly functioning?

[addyosmani]

I have a <template> using autobinding which appears to fail when used inside a <table> element in Safari as follows:

http://jsbin.com/xupin/1/edit

Output:

Whilst it does correctly render in Chrome:

I've seen other examples of template correctly working when say, used inside other arbitrary tags like ul/div etc: http://codepen.io/addyosmani/pen/qnDEt so I'm wondering if I'm doing something stupid or this is a legitimate bug.

[ajklein]

This is a limitation of non-<template>-supporting HTML parsers. There are a few tags, and <table> is one of them, inside which the parser only allows a whitelist of children. If a prospective child element is not in that list, it is "hoisted" out of the container (you can see this if you inspect the jsbin in Safari).

The usual workaround provided by TemplateBinding is to put the "repeat" attribute on some element that is allowed in the context (e.g., on a <tr> or <tbody>). But I'm not sure what the right way of to get auto-binding to interoperate with that feature is.

[addyosmani]

Thanks @ajklein. I appreciate the note about the limitations - I didn't realize this was indeed the case. I had seen a few threads where attempting to use the "repeat" attribute on a tr was suggested but was unable to get that working in this case in WebKit. My workaround for now will probably be reimplementing the table using divs which should be minimal effort.

I see that we recently documented the gotcha over at http://www.polymer-project.org/docs/polymer/databinding-compat.html so will close this.

[ajklein]

Fwiw, here's a jsbin that should work: http://jsbin.com/xozonobu/1/edit

[addyosmani]

Thanks @ajklein!