ecmascript-6 - 作为开槽节点

Question

我定义了一个阴影模板如下:

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

用户应该提供自己的 <th>通过类似的东西:

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

但是这不起作用。一旦我改变<th>至 <span> ，在所有其他事情不变的情况下，开槽节点出现了。这是因为关于使用 <th> 有一些未记录的怪癖吗？和 <slot>一起？谢谢。

Answer 1

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

但是……

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

那就没有 child 的限制了。

---

您也可以使用较新的 Customized built-in elements像<td is="my-td"></td>这样的范例: