包含 table 个单元格的聚合物自定义元素？

Question

我正在尝试使用包含几个 table 单元格的 Polymer 创建自定义元素。我想将其包含在 table 行中。我遇到的问题是自定义元素标签破坏了 table 的格式（因为 table 行期望直接包含 table 单元格元素，而不是通过子元素）。

有什么方法可以做我想做的事吗？

Answer 1

不支持，因为浏览器不支持。您可以做的是不使用 table 而是使用 CSS 来显示 table-cell、

等元素

另见 https://developer.mozilla.org/de/docs/Web/CSS/display

display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;

如果您想让您的自定义元素只包裹 <tr> 的一些 <td></td>（但不是全部），那么这可能适合您

<dom-module is="custom-tr">
  <template>
    <style>
      :host { display: table-row; }
      .td, ::content .td { display: table-cell; }
    <div class="td">a</div>
    <div class="td">b</div>
    <content></content>
    <div class="td">e</div>
    <div class="td">f</div>
  </template>
</dom-module>

然后像

一样使用它

<div class="table"> <!-- `.table` needs styling from outside -->
  <some-td-wrapper>
    <div class="td">c</div>
    <div class="td">d</div>
  </some-td-wrapper>
</div>

Answer 2

我通过简单地从等式中删除 <tr> 解决了这个问题。

<table>
  <thead>
    <th>Name</th>
    <th>Date</th>
  </thead>
  <tbody>
    <template is="dom-repeat" items="[[items]]">
      <custom-component item="{{item}}"></custom-component>
    </template>
  </tbody>
</table>

自定义组件的模板如下所示：

<template>
  <td>{{item.name}}</td>
  <td>{{item.date}}</td>
</template>

然后我在使用它的组件中为自定义组件添加样式，说：

custom-component {
  display: table-row;
}

包含 table 个单元格的聚合物自定义元素？

Polymer custom element containing table cells?

html

polymer

html-table

custom-element