Custom elements as table rows break layout when importing resources as first business

[koenbeuk]

I'm submitting a bug report

• Library Version: 1.10.1 and later (have not tested before)

Please tell us about your environment:

• Operating System: Windows 10

• JSPM OR Webpack AND Version webpack-cli 3.1.2

• Browser: Tested in Chrome

• Language: all

Current behavior: When using <tr as-element="custom-element"> inside a table, where the custom element starts by requiring other resources, the actual rendering is broken.

Given

...app.html
<template>
  <table>
    <tr as-element="custom-row"></tr>
  </table> 
</template>

...custom-row.html
<template>
  <require from="./custom-element.html></require>
  <td>1</td>
</template>

Gets rendered as:

<table>
  <tr>1</tr>
</table>

Note how the td element is missing. When I remove the from custom-row.html- or when I place the inside the td element, things work as expected.

See: https://gist.run/?id=a5c449b7a1900f729cc36a97003c70bd

Expected/desired behavior: In above example, I would have expected

<table>
  <tr><td>1</td></tr>
</table>

[bigopon]

@koenbeuk thanks for filing this issue. And sorry that somehow I missed it until now. The issue you encountered is because how Aurelia turns a template (or a html file content) into a view factory: it is first passed through native HTML5 parser via simple innerHTML. This means invalid HTML5 structure (like <td/> as a direct child of template, but not the only child type) will be processed differently. In this case, it just gets dropped.

What can be done to avoid this is to make sure only TDs are children of <template/>:

<template>
  <td>
    <require from="..."></require>
  </td>
</template>

Can you try the aboe?

[bigopon]

Here is an example of it working: https://gist.run/?id=45a7d62b74673e35ed667412085baa7d

[koenbeuk]

@bigopon Thanks for the example, I already got it working that way :)

[bigopon]

@koenbeuk nice. I guess we can close this issue?

[koenbeuk]

It's not blocking me anymore, feel free to close if you deem best

[bigopon]

It seems we could really use some doc describing this scenario to help future folks. Would be great if you could help with this @koenbeuk ❤️