HTML元素的聚合不一致嵌套

Question

我面临一个与Polymer元素中HTML标记嵌套有关的奇怪问题。

这是我的聚合物元素：

<template>
     <table>
        <tr>
            <data-table-row columns="{{headerColumns}}" isHeader=true></data-table-row>
        </tr>
        <template repeat="{{row in tableData}}">
            <tr>
                <data-table-row columns="{{row}}"></data-table-row>
            </tr>
        </template>
    </table>
</template>

data-table-row是我创建的另一个聚合物元素：

<template>
    <template if="{{isHeader}}">
        <th><paper-checkbox for></paper-checkbox></th>
        <template repeat="{{column in columns}}">
            <th>{{column.value}}</th>
        </template>
    </template>
    <template if="{{!isHeader}}">
        <td><paper-checkbox for></paper-checkbox></td>
        <template repeat="{{column in columns}}">
            <td>{{column.value}}</td>
        </template>
    </template>
</template>

渲染很好 - 我得到一个标题行和它下面的其他行列表。但是当我看到标记时，这很奇怪。标题行是＆＃34;外部＆＃34;表标签。像这样：

<data-table-row>Header Stuff...</data-table-row>
<table>
    <tr><data-table-row>Table Row 1</data-table-row></tr>
    <tr><data-table-row>Table Row 2</data-table-row></tr>
    <tr><data-table-row>Table Row 3</data-table-row></tr>
</table>

我的代码有什么问题吗？