1

我正在尝试使用模板 js 为 Table Element 创建一个自定义组件。但是当我创建一个组件时，输出不是我所期望的。

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

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

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

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

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

现在当我检查 html 文件时。<th>元素没有出现。

当我检查自定义组件时，我看到了类似的东西。<th>不是包装内容。

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

我在这里想念什么？

4

1 回答 1

1

当浏览器最初验证 dom 时，他会检查无效标签。他删除了<th>标签，因为它们不在<table>初始 dom 的有效范围内。

这里：

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

是表格的无效 dom，因此<th>标签被删除。当 web 组件在运行时呈现<table>并且 dom 有效时，<th>标签已被删除。我认为您对此无能为力，因为您无法控制浏览器如何检查 dom。

您可以尝试将display: table其用作解决方法。

于 2020-03-26T10:43:21.970 回答