帶嵌套元素的聚合物光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

回答

相關問題