<th> 作为开槽节点

Question

我已经定义了一个影子模板如下：

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

用户应该通过以下方式提供自己的<th>s：

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

但是这不起作用。只要我将<th> 更改为<span>，并且所有其他内容都保持不变，就会出现开槽节点。这是因为有一些关于一起使用 <th> 和 <slot> 的无证怪癖吗？谢谢。

Answer 1

<tr> 和 <tbody> 允许的孩子数量非常有限。因此，您可能无法按照您尝试做的方式做您想做的事情。

但是……

您可以使用 <div> 和 <span> 并将它们的 CSS 设置为：

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;

那么就没有孩子的限制了。

---

您也可以使用较新的Customized built-in elements 范例，例如<td is="my-td"></td>：