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>

具有嵌套元素的Polymer Light DOM

1 个答案: