строки таблицы внутри dom-repeat не совпадают с заголовками вне dom-repeat

Question

У меня есть простой элемент с именем «продукты». Это таблица, и я представляю каждый продукт в списке как строки с дочерним элементом внутри dom-repeat. Однако столбцы не выстраиваются в линию, даже если я использовал фиксированную ширину как для родителя, так и для ребенка. Кто-нибудь знает о решении?

screenshot

<template> 
<style> 

</style> 
<tr> 
    <th class="col1" style="min-width: 150px;" colspan="1">[[product.col1]] </th> 
    <td class="col2" colspan="1">[[product.col2]]</td> 
    <td class="col3" colspan="1">[[product.col3]]</td> 
    <td class="col4" colspan="1">[[product.col4]]</td> 
    <td class="col5" colspan="1">[[product.col5]]</td> 
    <td class="col6" colspan="1">[[product.col6]]</td> 
    <td class="col7" colspan="1">[[product.col7]]</td> 
    <td class="col8" colspan="1">[[product.col8]]</td> 
</tr> 
</template> 

<dom-module id="product-item"> 

    <template> 
    <tr> 
     <th class="col1" style="min-width: 150px;" colspan="1">[[product.col1]]</th> 
     <td class="col2" colspan="1">[[product.col2]]</td> 
     <td class="col3" colspan="1">[[product.col3]]</td> 
     <td class="col4" colspan="1">[[product.col4]]</td> 
     <td class="col5" colspan="1">[[product.col5]]</td> 
     <td class="col6" colspan="1">[[product.col6]]</td> 
     <td class="col7" colspan="1">[[product.col7]]</td> 
     <td class="col8" colspan="1">[[product.col8]]</td> 
    </tr> 
    </template> 

codepen here

Answer 1

Это не должно работать. <table>, <thead>, <tbody> и <tr> не поддерживают пользовательские элементы как детей.

Даже не <template> поддерживается во всех браузерах (IE, Edge?, ...) в этих тегах.

Для браузера, где <template> на самом деле работает, Что вы можете сделать, это сделать <product-item> элемент, который расширяет <tr> и использовать его как

<tbody> 
    <template is="dom-repeat" items="{{products}}"> 
     <tr is="product-item" product="{{item}}"></tr> 
    </template> 
    </tbody> 

См https://www.polymer-project.org/1.0/docs/devguide/registering-elements для более подробной информации.