Html stencil js中的表组件

我试图使用stencil js为Table元素创建一个自定义组件 输出不是我期望的

import { Component, h,  } from "@stencil/core";

@Component({
  tag: "table-head",

})
export class table{
  render() {
    return (
        <table class="table">
            <thead>
                <tr>
                        <slot/>
                </tr>
            </thead>
        </table>
    );
  }
}

从“@stencil/core”导入{Component，h，}”；
@组成部分({
标签：“桌头”，
})
导出类表{
render（）{
返回(
);
}
}

我在html文件中使用上述组件，如下所示

<table-head>
      <th>Frist</th>
      <th>second</th>
 </table-head>

弗里斯特
第二

现在当我检查html文件时<代码>元素未显示

当我检查自定义组件时，会看到类似的情况。

未包装内容

        <thead>
            <tr> Frist
                 second </tr>
        </thead>

弗里斯特
第二

---

这里缺少什么？

当浏览器最初验证dom时，会检查是否有无效标记。 他删除了

标记，因为它们不在初始dom中有效的

中

这是：

<table-head>
  <th>Frist</th>
  <th>second</th>
</table-head>

弗里斯特
第二

是表的无效dom，因此将删除

标记。当webcomponent在运行时呈现

且dom有效时，

标记已被删除。我认为您对此无能为力，因为您无法控制浏览器如何检查dom

您可以尝试使用

display:table

作为解决方法