Полимерный пользовательский элемент, содержащий ячейки таблицы?

Я пытаюсь создать пользовательский элемент с полимером, который содержит несколько ячеек таблицы. Я хочу включить его в строку таблицы. Проблема, с которой я сталкиваюсь, заключается в том, что теги пользовательских элементов нарушают формат таблицы (поскольку строка таблицы должна содержать элементы ячейки таблицы непосредственно, а не через подэлемент).

Есть ли какой-то способ сделать то, что я хочу?
2 2
polymer html html-table custom-element

2 ответа:

Это не поддерживается, потому что браузер не поддерживает его. То, что вы можете сделать, это не использовать таблицу, а вместо этого использовать 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;

Если вы хотите сделать свой пользовательский элемент, чтобы просто обернуть несколько <td></td> (но не все) из <tr> , то это может сработать для вас

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

Я решил эту проблему, просто удалив <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;
}
1