javascript-创建自定义表格行

我正在尝试创建一个自定义表行,但是很难使其正常运行.我尝试了以下两种方法,它们给出了奇怪的结果.我认识到,没有自定义元素非常容易,但这只是一个更大项目的一个小例子.我可以进行哪些更改以获得所需的结果？

class customTableRow extends HTMLElement {
  constructor(){
    super();
    
    var shadow = this.attachShadow({mode: 'open'});
    
    this.tableRow = document.createElement('tr');
    

    var td = document.createElement('td');
    td.innerText = "RowTitle";
    this.tableRow.appendChild(td);
    
    var td2 = document.createElement('td');
    td2.innerText = "RowContent";
    td2.colSpan = 4;
    this.tableRow.appendChild(td2);

    shadow.appendChild(this.tableRow);
  }
  
}

customElements.define('custom-tr', customTableRow);

//Attempt 2
var newTr = new customTableRow;
document.getElementById('table2Body').appendChild(newTr);

td {
  border: 1px solid black;
}

<span>Attempt 1:</span>
<table>
  
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
    </tr>
  </thead>
  
  <tbody>
    <custom-tr />
  </tbody>
  
</table>

<hr>

<span>Attempt 2:</span>
<table id="table2">

  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
    </tr>
  </thead>
  
  <tbody id="table2Body">
<!--     It should append here -->
  </tbody>
  
</table>

<hr>

<span>This is how I want it to look:</span>
<table id="table2">

  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
      <th>Five</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Row Title</td>
      <td colspan="4">Row Content</td>
  </tbody>
  
</table>

解决方法:

< table>元素及其子组件< tbody&gt ;、< tr>需要非常特定的语法.例如,仅< tr>元素被授权为< tbody>的子代.

因此,您不能定义元素并将其插入到< tbody>中.或< table>.如果这样做,它将被移到< table>之外.在解析.因此,将显示您的第一个示例(请参见开发工具中的代码).

相反,您应该像在this answer to a similar question中那样定义自定义标签.

或者,您应该使用< custom-table&gt ;,< custom-tbody> …重新定义完整的自定义表结构,例如this other answer.

另外,您应该使用结束标记< custom-tr>< / custom-tr&gt ;,然后将CSS规则插入Shadow DOM(如果希望通过在其内部应用).

标签：html,javascript,web-component,shadow-dom,custom-element
来源： https://codeday.me/bug/20191009/1880516.html