<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> 允许的 children 非常有限。因此，您可能无法按照自己的方式做您想做的事情。

但是...

您可以使用 <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;

那就没有children的限制了。

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

<th> 作为开槽节点

<th> as slotted node

ecmascript-6

custom-element