Fix table element parsing in ie11

[TimvdLippe]

Using the fix from jQuery when setting the innerHTML text. See the links in the source code for the original implementation. This solution was previously submitted in a different form in #16 and #19 by @kapouer, but these were never merged for other unrelated reasons.

Fixes #3

[sorvell]

Let's add tests for all the special table nodes (col and thead look missing). Otherwise looks ok. Thanks!

[TimvdLippe]

@sorvell Done!

[jay8t6]

@TimvdLippe This is awesome! Thanks!

[web-padawan]

I'm wondering if the similar fix can be applied to the select element as well?
See Polymer/polymer#1735

[TimvdLippe]

@web-padawan Hm yes that should be possible. Let me update the PR tomorrow

[web-padawan]

BTW maybe also optgroup tag?

[TimvdLippe]

I think that is working correctly in IE11, is it not?

[web-padawan]

Not sure, I was just guessing. Here is the glitch to check: https://morning-fuel.glitch.me

[smalluban]

@sorvell Is there anything more, that stops this PR from merging?

[TechQuery]

But it will be failed in this case:

<table>
    <tbody><template>
        <tr><td>Something...</td></tr>
    </template></tbody>
</table>

HTML parser of IE will drop <template /> directly, you won't find anything of your template...

[TimvdLippe]

@TechQuery Yes and there is nothing we can do about it 😢 The template is already gone before we even have a chance to search for it. For more info see: Polymer/polymer#1567 (comment)

[TechQuery]

@TimvdLippe So I can only allow users to replace <template /> with <!-- -->...

[TimvdLippe]

Unfortunately that is the result of parsing of IE11. Don't think you have any other option. I would like it to be different, but haven't found a workable solution 😢

[tekreme73]

I got a workable solution for you if you have to use a table layout.

I created a custom element for each layers of my table: x-table, x-header, x-row and x-cell. For each layers, I defined the :host CSS display property to match the table layout behavior like:

• x-table => display: table
• x-header => display: table-header-group
• x-row => display: table-row
• x-cell => display: table-cell

With this solution, I'm able to do dom-repeat for the rows, even with IE11.
It will need some CSS tricks to have the same behavior as a native table tag but it does the stuff.