相关疑难解决方法(0)

我目前正在使用自定义元素（Web 组件）实现数据表元素。表格可以具有用于呈现每一行的不同类型的单元格（文本、数字、日期等）。

例如

<my-table>
    <my-table-cell-text column="name"></my-table-cell-text>
    <my-table-cell-date column="dob" format="YYYY-MM-DD"></my-table-cell-date>
    <my-table-cell-number column="salary" decimals="2"></my-table-cell-number >
</my-table>

我还有一个MyTableCell所有单元格元素都扩展的类。这适用于共享通用功能，但样式可能很麻烦，因为每个单元格类型都是它自己的 html 标签。目前，我在扩展时添加了一个 css 类MyTableCell，但为了论证，可以说我不想这样做。

理想的解决方案是能够扩展自定义元素，使用is关键字，例如<my-table-cell is="my-table-cell-text">，但只允许内置 html 元素。

我可以想到解决这个问题的 3 种方法：

1. 具有类似于 的语法<input type="">，但需要做更多的工作，因为您不再扩展基类，而是创建相同元素的变体，这意味着您需要一种自定义方式来注册不同的变体，例如静态MyTableCell.registerType

2. 一种可组合的方法，我将渲染器元素 包裹<my-table-renderer-text>在通用<my-table-cell>. 这避免了自定义注册方法，但它更难编写，并导致更多元素和更多样板代码，这反过来意味着性能下降。

3. 两者的混合，用户写入<my-table-cell type="text">和单元格在document.createElement('my-table-rendener-'+ type)内部使用类似的东西。这保留了选项 1 的更简单的语法，同时仍然避免了自定义寄存器方法，但它具有与选项 2 相同的性能影响。

你能提出更好的选择吗？我错过了什么吗？

我正在尝试创建一个自定义表格行，但很难让它正常运行。我尝试了以下两种方法，它们给出了奇怪的结果。我意识到这很容易在没有自定义元素的情况下实现，但这是一个更大项目的一个小例子。我可以改变什么来达到预期的结果？

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> …