如何不渲染 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>，如下一个 sn-p 所示，将内容投影到我的自定义元素中：

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

现在的问题是，所有items 都立即呈现。但我不想在那里展示它们，因为我必须过滤我的组件 (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>

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>