Question

我有两个Polymer元素：

<polymer-element name="image-slider">
  <template>
    <content id="images" select="img">
  </template>

  <script>
  Polymer('image-slider', {
    ready: function() {
      $(this.$.images.getDistributedNodes()).each(function() {
        $(this).width(100);
      });
      console.group('image-slider');
      console.log('content#images nodes: ', this.$.images.getDistributedNodes());
      console.groupEnd('image-slider');
    }
  })
  </script>
</polymer-element>


<polymer-element name="fruit-item">
  <template>
    <image-slider>
      <content id="images" select="img">
    </image-slider>
  </template>

  <script>
  Polymer('fruit-item', {
    ready: function() {

    }
  })
  </script>
</polymer-element>

您可以看到<fruit-item>使用<image-slider>。

我正在尝试将<img>内容中的所有<fruit-item>内容传递给<image-slider>。不幸的是它不起作用。它从<img>的内容传递文本节点而不是<fruit-item>。

(DEMO)

Answer 1

您的自定义元素中有一些您根本不需要的东西。我在http://jsbin.com/rijezabapuwe/1/edit进行了重写，但要点是不要使用JS样式，使用样式与:host和::content影子dom选择器。这样就可以立即消除您对所使用的ready函数的任何需求，因此请将您的元素转换为noscript元素。

将<content>中的节点传递给嵌套组件元素</content>

1 个答案: