Как сделать пользовательскую таблицу в пользовательском элементе?

Question

Я работаю над пользовательским элементом с lit-element . Я хочу создать свой собственный элемент таблицы, но есть некоторые проблемы.

First. Казалось, браузер позволяет tr, td теги только для table.

<!-- in html -->
<my-table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</my-table>

<!-- chrome rendered -->
<my-table> A B </my-table>

Второй. Он может имитировать с помощью CSS, но CSS не может реализовать colspan.

<my-table> <!-- display: table -->
  <my-tr> <!-- display: table-row -->
    <my-td>A</my-td> <!-- display: table-cell -->
    <my-td colspan="3">B</my-td> <!-- There is no way to implement colspan -->
  </my-tr>
</my-table>

В-третьих. Я пытаюсь стилизовать «display: content» на хосте. Казалось, что это работает, но хост не имеет данных для определения размера ящика, как clientHeight.

class MyTd extends LitElement {
  render() {
    return html`
      <style>
        :host { display: content; }
        td {
          all: inherit; /* It make to inherit host's style */
          display: table-cell;
        }
      </style>
      <td>
        ${html`<slot></slot>`} // I don't know why it work.
      </td>
    `;
  }
}

// other js file.
const td = document.querySelector('my-td');
td.clientHeight; // 0

Я могу переопределить clientHeight и кое-что еще (offsetHeight, getBoundingClientRect ...), но я не знаю, что это правильно, и это единственный способ.

Есть ли другой способ создать пользовательскую таблицу или что-то не так в моих мыслях?