具有嵌套元素的聚合物轻型DOM

Question

如何在没有容器元素的情况下将Light DOM添加到元素中？我正在尝试构建一个包含iron-pages的自定义元素，并希望将其内容作为Light DOM传递。但是，呈现的DOM包含导致iron-pages无法工作的包装。有没有办法做到这一点？这就是我想要做的。https://plnkr.co/edit/Twa1D4cpCy5HNCSpNxqu?p=preview

<dom-module name="foo-pages">
    <template>
      <div id="sections">
        <content select="[sections]"></content>
      </div>
      <iron-pages id="pages" selected="0">
        <content select="[pages]"></content>
      </iron-pages>
    </template>
</dom-module>


<!-- usage -->
<foo-pages>
    <div sections>
      <paper-button id="btn1" raised>view 2</paper-button>
      <paper-button id="btn2" raised>view 3</paper-button>
    </div>
    <div pages>
      <div for="btn1">one</div>
      <div for="btn2">two</div>
    </div>
</foo-pages>

Answer 1

This之前对一个略有不同的问题的回答发现了以下内容。

您只能选择主机节点的直接子节点，而不能选择子节点。

因此，您需要通过删除包装器并将选择标准添加到页面本身，使页面直接指向主机节点的子节点。

<foo-pages>
    <div sections>
        <paper-button id="btn1" raised>view 2</paper-button>
        <paper-button id="btn2" raised>view 3</paper-button>
    </div>
    <div pages for="btn1">one</div>
    <div pages for="btn2">two</div>
</foo-pages>