时间戳

首页 > 解决方案 > 作为开槽节点

ecmascript-6 - 作为开槽节点

问题描述

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

  <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>在一起的无证怪癖吗？谢谢。

标签： ecmascript-6custom-element

解决方案

<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;

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

您还可以使用更新的自定义内置元素范例，例如<td is="my-td"></td>：

推荐阅读