<th> as slotted node

Question

I have defined a shadow template as follows:

  <table id="overviewbox-loadingbox">
    <thead>
        <tr>
        <slot name="table-header"></slot>
        </tr>
    </thead>
    <tbody>
        <div id="loadingbox"></div>
    </tbody>
  </table>

The users are supposed to supply their own <th>s by something like:

  <th slot="table-header" data-column_name="description">describing here</th>

However this doesn't work. As soon as I change <th> to <span>, with all other things unchanged, the slotted node shows up. Is this because there is some undocumented quirks about using <th> and <slot> together? Thanks.

Answer 1

<tr> and <tbody> have a very limited set of allowed children. So you may not be able to do what you are trying to do the way you are trying to do it.

But...

You can use <div> and <span> and just set their CSS to be:

display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;

Then there is no limitation of children.

---

You can also use the newer Customized built-in elements paradigm like <td is="my-td"></td>: