How custom element can have multiple <tr> components

Question

I want create a one <table> where multiple custom elements can have multiple <tr> components.
I tried using containerless, but element get rendered outside of <table>.

<table>
  <thead>
    <tr>
      <th>Position</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <order-line repeat.for="line of lines" line.to-view="line" containerless></order-line>
  </tbody>
</table>

And custom element looks like

<template>
  <tr>
    <td>${line.position}</td>
    <td>${line.name}</td>
  </tr>
  <tr if.to-view="detailsVisible">
    <td colspan="2">${line.complicatedDescription}</td>
  </tr>
</template>

How I can get a table row with details as another <tr> element within one aurelia CustomElement?

Answer 1

This is a limitation of the html spec. A <table> element cannot contain elements other than <tbody>, <tr>, etc.

You can use as-element to overcome this limitation:

<tr as-element="order-line" repeat.for="line of lines" line.to-view="line" containerless></tr>

This tells the template compiler that this <tr> is in fact an order-line custom element and to process it as such. At the same time, it "fools" the browser into thinking that this is just an ordinary <tr>