html - 如何在自定义元素中制作自定义表格？

Question

我正在使用 处理自定义元素点燃元素 .我想制作自己的自定义表格元素，但存在一些问题。

第一的。似乎浏览器允许 tr , td仅标签 table .

<!-- in html -->
<my-table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</my-table>

<!-- chrome rendered -->
<my-table> A B </my-table>

第二。 CSS可以模仿，但是CSS不能实现colspan。

<my-table> <!-- display: table -->
  <my-tr> <!-- display: table-row -->
    <my-td>A</my-td> <!-- display: table-cell -->
    <my-td colspan="3">B</my-td> <!-- There is no way to implement colspan -->
  </my-tr>
</my-table>

第三。我尝试在主机上使用“显示:内容”进行样式设置。它似乎有效，但主机没有像 clientHeight 这样的盒子尺寸数据。 .

class MyTd extends LitElement {
  render() {
    return html`
      <style>
        :host { display: content; }
        td {
          all: inherit; /* It make to inherit host's style */
          display: table-cell;
        }
      </style>
      <td>
        ${html`<slot></slot>`} // I don't know why it work.
      </td>
    `;
  }
}

// other js file.
const td = document.querySelector('my-td');
td.clientHeight; // 0

我可以覆盖 clientHeight和其他东西( offsetHeight ， getBoundingClientRect ...)但我不知道这是正确的，这是唯一的方法。

有没有其他方法可以创建自定义表，或者我的想法有问题？

Answer 1

这对于自定义元素来说并不是一个很好的用例 - 问题是我为什么要使用 <my-td>当<td>存在并在任何地方工作？
您可以使用 column-count在 CSS 中模仿表格，但您有更严重的问题 - 浏览器(和相关的 a11y 工具)请参阅 <table> 的 DOM作为结构化数据表，而您的 <my-table>只是另一个自定义元素。
这也打破了表格的 DOM 层次结构 - 即使您的元素包装了相关的表格元素，它们也不会继承或扩展它们。
所以对于你的第一个例子，你的 DOM 是这样的:

<my-table>
  #shadow-root
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
</my-table>

浏览器通常不会将单元格连接到行并将行连接到表将跨这些影子 DOM 边界工作，并且 <tr>完全像在新文档片段的根处一样呈现。
同样，第三次尝试的 DOM 如下所示:

<my-table>
  #shadow-root
    <table>
       <my-tr>
         #shadow-root
           <tr>
             <my-td>
               #shadow-root
                 <td>

这些阴影根中的每一个都是一个新的孤立碎片。
问题变成了你想用这个结构做什么？
您是否想要看起来像表格但对行和单元格使用自定义元素的内容，请考虑使用 display: grid布局代替。它比表格强大得多，并且在自定义元素中，CSS 比相当不一致的 display: table-cell 得到更好的支持。 .
如果你想要一些结构为表的东西，考虑把整个表放在影子根中并将数据作为属性传递

@customElement('my-table')
class MyTable 
  extends LitElement {
  render() {
    return html`
<table>
  ${this.items.map(i => html`
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>`)}
</table>
    `;
  }

  @property({attribute: false})
  items: readonly RowRecordType[];
}

然后使用属性前缀调用它:

<my-table .items=${theListOfRows}></my-table>

最后，如果你想扩展 <td>您可以使用 is= 添加到它语法，但这在规范上有点死胡同，在 Safari 或 Opera 上根本不支持，并且在其他方​​面很糟糕。
您可以扩展单元格:

class MyCell
    extends HTMLTableCellElement { ...

customElements.define('my-cell', MyCell, { extends: 'td' });

然后做:

<table>
  <tr>
    <td is="my-cell">A</td>
    <td is="my-cell">B</td>
  </tr>
</table>

但是，这不受 LitElement 支持，您最好直接实现您的自定义 Web 组件。