can't render tables: where am I wrong?

[tenuki]

Example below tries to reproduce a seems to be bug, I found.

Trying to show by looping and calling a component seems to fail in rare cases.

Tested on playground.

<template hibiki>
<hibiki-data>
{
    "publicaciones": [{"content":"pub 1..."}, {"content":"pub..2"}]
}
</hibiki-data>
<define-component name="test">
<td>xx {{$args.argv1.content}} </td>
</define-component>
<define-component name="test2">
yy {{$args.argv1.content}}
</define-component>

<h1 class="title">&#x1f338; Hibiki HTML Playground</h1>

<table class="table">
    <thead><tr><th><abbr title="Target Date">target</abbr></th></tr></thead>
    <tbody>
        <tr foreach="(@yy,@yyidx) in $.publicaciones">
             <local-test argv1="*@yy"></local-test>          
        </tr>
  </tbody>
  </table>
<hr/>

<table class="table">
    <thead><tr><th><abbr title="Target Date">target2</abbr></th></tr></thead>
    <tbody>
        <tr foreach="(@xx,@xxidx) in $.publicaciones">
          <td>
             <local-test2 argv1="*@xx"></local-test2>          
          </td>
        </tr>
  </tbody>
  </table>

  <hr/>

</template>

[sawka]

@tenuki so the problem is related to how the HTML is parsed by the browser (specifically with <table>, <ul>, and <select> type elements). The browser will not allow a <td> element inside of the <define-component> tag. It will also not allow a <local-test> component inside of a <tr> (if you inspect the element tree in the devtools you'll see it is all messed up).

There are two workarounds in Hibiki to deal with this. The first is that you can prefix any normal HTML tag with "html-" and it will still render as the base tag. So in your first <define-component>, you could write it as:

<define-component name="test">
    <html-td>xx {{$args.argv1.content}}</html-td>
</define-component>

For the <table>, you could rewrite the entire table using "html-":

<html-table>
    <html-thead>...</html-thead>
    <html-tbody>
        <html-tr>
            <local-test argv1="*@yy"></local-test>
        </html-tr>
    </html-tbody>
</html-table>

or you can use the special attribute "component" which will ignore whatever element name you write and act as component attribute is the element name. so we can write <td component="local-test" argv1="*@yy">...</td> to stand in for <local-test>. Here's how you could add that to your existing table:

<table class="table">
    <thead><tr><th><abbr title="Target Date">target</abbr></th></tr></thead>
    <tbody>
        <tr foreach="(@yy,@yyidx) in $.publicaciones">
             <td component="local-test" argv1="*@yy"></td>          
        </tr>
  </tbody>
</table>

Hopefully this helps.

[tenuki]

Hopefully this helps.

Actually it helps a lot! Thank you so much!! Btw, Hibiki is awesome! Thanks.