Как пользовательский элемент может иметь несколько <tr>компонентов

Question

Я хочу создать один <table>, где несколько пользовательских элементов могут иметь несколько <tr> компонентов.
Я пытался использовать containerless, но элемент визуализируется за пределами <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>

И пользовательский элемент выглядит как

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

Как я могу получить строку таблицы с деталями в качестве другого элемента <tr> в пределах одного элемента aurelia CustomElement?

Answer 1

Это ограничение спецификации html.Элемент <table> не может содержать элементы, отличные от <tbody>, <tr> и т. Д.

Вы можете использовать as-element, чтобы преодолеть это ограничение:

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

Это говорит шаблонукомпилятор, что этот <tr> на самом деле является order-line пользовательским элементом и обрабатывает его как таковой.В то же время он «обманывает» браузер, заставляя его думать, что это обычный <tr>