Javascript <；表>；子元素在shadowdom中的使用

是否有任何约束阻止

、

、

等在阴影DOM中开槽

给出以下示例：

<script>
class Table extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: 'open'}).innerHTML = `
            <table>
                <thead>
                    <slot name="header"></slot>
                </thead>
                <tbody>
                    <slot name="row"></slot>
                </tbody>
            </table>
        `;
    }
}
window.customElements.define('data-table', Table);
</script>
<data-table>
    <tr slot="header">
        <th>header1</th>
    </tr>
    <tr slot="row">
        <td>cell1</tr>
    </tr>
</data-table>

类表扩展HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）。innerHTML=`
`;
}
}
window.customElements.define（'data-table'，table）；
校长1
第1单元

呈现为以下结构：

---

解决方法是在

slotchange

event handler中使用模板并使用JS插入模板内容，但是我想避免这种情况，因为克隆的内容最终会出现在阴影DOM中，并且不可能从自定义元素外部覆盖样式。

如注释中所述，根据自定义元素规范v1，这目前是不可能的。
规范将

的标签限制为一组

、

等加上

和

浏览器供应商不愿意在HTML解析器中加入更改。

---

我想现在唯一的解决办法是使用一个包含

div

s的网格和一堆

aria-*

属性。

在

表上放置其他标记

它不正确然后你应该使用

css prop

（

显示：表格单元格；

，

显示：表格行

，

显示：表格页眉组；

，

显示：表格页脚组；

）以及其他标记

但如果仍要使用

表

您可以使用以下函数附加标签：

从'lit'导入{html，css，LitElement}；
从'lit/decorators.js'导入{customElement，property}；
@customElement（“数据表”）
导出类dataTable扩展了LitElement{
静态样式=css`
桌子{
边框：1px实心；
}
`;
render（）{
返回html`
${this.templateGen（）}
`;
}
templateGen（）{
返回html``；
}
}

表中的测试槽
需要一个
父元素。因此，在本用例中，最好解析lightDOM并将它们注入到与阴影DOM无关的表中。
和
只允许
作为子元素。不幸的是，@Andreas是对的，-表不允许
作为其子元素或子元素是的，这个问题今天已经被发现了：而且，看看Anne的回答，他们不会干扰解析器。正如我在上面的评论中所说的，你可以自己将那些
TR
从lightDOM移动到shadowDOM：
this.shadowRoot.querySelector（“TBODY”）.append（…[this.querySelector（“TR”））
我正在构建一个使用这些元素的库，我无法将这些东西注入到我的影子DOM中，我也不愿意用JS来实现这一点，谢谢你的建议。