如何不呈現內容 <content> 在Shadow DOM中標記？

Question

我目前正在開發一個Web組件（使用Polymer構建），以使元素的使用者將一些內容放入elements標記中，如下所示：

<my-element mode="fancy">
  <item>First item</item>
  <item>Second item</item>
  <item>Third item</item>
       <!-- ... -->
</my-element>

因此，下一步是在元素定義中使用<content> ，如下面的代碼片段所示，將內容投影到我的自定義元素中：

<template>
  <content id="idToHandleIt" select="item"></content>
</template>

現在的問題是，所有item都被立即渲染。 但是我不想在這里顯示它們，因為我必須過濾組件邏輯（JavaScript）邏輯中的元素以獲取更多條件，而不僅僅是可以在select屬性中使用的CSS-Selectors。

是否有人可以很好地解決該問題，或者是否有API可以讓我抓住 分布式節點？ 正如我現在所嘗試的，使用getDistributedNodes()的唯一方法是執行以下操作：

this.querySelector('idToHandleIt').getDistributedNodes();

但是我總是需要<content>元素:(

Answer 1

如何手動添加到shadowRoot？

 <script src="http://www.polymer-project.org/webcomponents.min.js?20141211"></script> <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> <polymer-element name="example-element"> <template></template> <script> Polymer({ ready: function() { var children = this.children; for (var i = 0; i < children.length; i++) { var childElement = children[i]; if (childElement.hasAttribute("banana") && childElement.getAttribute("amount") > 0) { this.shadowRoot.appendChild(childElement); // we have to negate one from the index for each append to the shadowRoot i--; } } } }); </script> </polymer-element> <example-element> <p banana amount="1">one banana</p> <p apple>one apple</p> <p banana amount="2">two banana</p> <p banana amount="3">three banana</p> <p banana amount="0">no banana</p> </example-element> 

Answer 2

幸運的是，您可以通過多種方式執行此操作，但是您應該避免設置<content>本身的樣式，因為它只是一個插入點。

但是，如果要延遲實際插入，可以將<content> select屬性設置為“無效”，如下所示：

 <script src="http://www.polymer-project.org/webcomponents.min.js?20141211"></script> <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> <polymer-element name="x-item" noscript> <template> <div> <content></content> </div> </template> </polymer-element> <polymer-element name="example-element"> <template> <style> .container { opacity: 1; transition: all 1s linear; } [unresolved] { visibility: none; opacity: 0; } </style> <template if="{{counter > 0}}">They will appear after {{counter}}s.</template> <div unresolved?="{{counter > 0}}" class="container"> <content id="idToHandleIt" select="{{counter > 0? 'nope' : 'x-item'}}"></content> </div> </template> <script> Polymer({ counter: 5, ready: function() { this.countDown(); }, countDown: function() { if (this.counter <= 0) { return; } this.async(this.countDown, null, 1000); this.counter--; } }); </script> </polymer-element> <example-element> <x-item>Item 1</x-item> <x-item>Item 2</x-item> <x-item>Item 3</x-item> <x-item>Item 4</x-item> <x-item>Item 5</x-item> </example-element>