带嵌套元素的聚合物光DOM

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

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

来源

2017-03-03 kleptomac

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>

来源

2017-03-03 17:45:45 Maria

有趣。这样可行。在我看来，包装div看起来更干净。但我也认为我不能有重复的内容引用（“页面”）。我认为按照自定义元素的标准，只有第一个参考将被拿起，休息将被忽略。它是否仍然适用于Polymer 2.0？ – kleptomac

我同意包装会更干净。不幸的是，Polymer文档中只有很少内容选择的文档。然而，在2.0'内容'中被替换为'slot'，并且文档声明内容只能通过名称而不是任意选择器来选择。所以我的猜测是我的解决方案可能无法正常工作。 [升级说明]中有一些信息（https://www.polymer-project.org/2.0/docs/upgrade） – Maria

如果您正在查找插槽，[本文]（https://developers.google .com/web/fundamentals/getting-started/primer/shadowdom＃slots）也可能有所帮助。虽然它不是聚合物，但假设这是聚合物2.0中插槽的工作原理 – Maria

带嵌套元素的聚合物光DOM

回答

相关问题