javascript - 如何在 Shadow DOM 中不渲染 <content> 标签中的内容？

Question

我目前正在开发一个 Web 组件(使用 Polymer 构建)，让元素的使用者将一些内容放入元素标签中，如下所示:

<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选择器。属性。

有人对这个问题有一个好的解决方案吗？或者是否有一个 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>