javascript - 将 内的节点传递给嵌套组件元素

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 Shadow dom 选择器来设置样式。这立即消除了对您正在使用的 ready 函数的任何需求，因此将您的元素转换为 noscript 元素。