Javascript 基于<；表>；。断流_Javascript_Html_Web Component

Javascript 基于<；表>；。断流

javascript html

Javascript 基于<；表>；。断流,javascript,html,web-component,Javascript,Html,Web Component,我正在尝试使用基于表的“web组件”创建数据网格。我正在使用TBODY中的slot添加新项目。但是TR行被渲染出TBODY。我不理解这种行为。使用TABLE和TR元素，可能是因为这个原因，但是使用HTMLElement.appendChild（）也不起作用 <html> <head> <script type="module"> class DataGrid extends HTMLElement { TEMPLAT

我正在尝试使用基于表的“web组件”创建数据网格。我正在使用TBODY中的slot添加新项目。但是TR行被渲染出TBODY。我不理解这种行为。使用TABLE和TR元素，可能是因为这个原因，但是使用HTMLElement.appendChild（）也不起作用

<html>
<head>
<script type="module"> 
    class DataGrid extends HTMLElement {
      TEMPLATE_ID = '#data-grid';
      constructor() {
        super();
        this._records = [];
      }
      connectedCallback() {
        let shadow = this.attachShadow({mode: 'open'});
        this._render(shadow);
      }

      _render(shadow){
        let tmpl = document.querySelector(this.TEMPLATE_ID);
        shadow.appendChild(tmpl.content.cloneNode(true));
        //this.appendChild(tmpl.content.cloneNode(true)); //
      }
    }

    customElements.define('data-grid', DataGrid);
</script>
</head>
<body>
    <template id="data-grid">
    <table border="1">
      <thead>
        <tr>
          <th>id</th>
          <th>time</th>
          <th>voltage</th>
        <tr>
      </thead>
      <tbody>
        <slot></slot>
      <tbody>
    </table>
    </template>

    <data-grid>
      <!-- need replaced to component
<grid-row time="" voltage=""> 
 -->
      <tr>
        <td>1</td>
        <td>123123123120</td>
        <td>12.0</td>
      </tr>
      <tr>
        <td>2</td>
        <td>123123133324</td>
        <td>12.1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>123123122330</td>
        <td>12.2</td>
      </tr>
    </data-grid>

 </body>


类DataGrid扩展了HtmleElement{
模板_ID='#数据网格'；
构造函数（）{
超级（）；
这个。_记录=[]；
}
connectedCallback（）{
设shadow=this.attachShadow（{mode:'open'}）；
这是渲染（阴影）；
}
_渲染（阴影）{
让tmpl=document.querySelector（this.TEMPLATE\u ID）；
appendChild（tmpl.content.cloneNode（true））；
//this.appendChild（tmpl.content.cloneNode（true））//
}
}
自定义元素。定义（'data-grid'，DataGrid）；
身份证件
时间
电压
1.
123123123120
12
2.
123123133324
12.1
1.
123123122330
12.2

来自MDN的

文档：

准父母

（仅当表没有子

元素，甚至然后仅在任何

、

和

元素）；否则，父项必须是

，

或

所以

不是有效的HTML吗
将（无效）光域移动到
内部
阴影域 注意：
attachShadow（）
两个集和免费返回此.shadowRoot
无需创建自己的
shadow
变量
psuedo代码：

const table = this.shadowRoot.querySelector("TABLE"); this.querySelectorAll("TR").forEach(table.appendChild);