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都会立即呈现。但是我不想在那里展示它们，因为除了我可以在select属性中使用的CSS选择器之外，我还必须过滤我的组件（JavaScript）逻辑中的元素以获得更多标准。

有没有人能够很好地解决这个问题，或者是否有一个API可以抓取 分布式节点？正如我现在所尝试的那样，使用getDistributedNodes()的唯一方法是，如果我执行以下操作：

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

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

Answer 1

如何手动添加shadowRoot？

＆＃13;

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

＆＃13;

Answer 2

幸运的是，您可以通过多种方式实现这一目标，但您应该避免使用<content>本身的样式，因为它只是一个插入点。

但是，如果您想延迟实际插入，可以将select的{{1}}属性设置为＆＃34;无效＆＃34;如下所示：

＆＃13;

<content>

＆＃13;

如何在Shadow DOM中的<content>标记中呈现内容？</content>

2 个答案: