Question

是否可以访问＆＃34;内容中的元素＆＃34;聚合物领域？

让我举个例子：

iface=$(airmon-ng start wlan0 2> /dev/null | grep monitor)

我想让my-element使用<my-element> <my-sub-element1></my-sub-element1> <my-sub-element2></my-sub-element2> </my-element>从其他服务获取一些数据，然后在iron-ajax和my-sub-element1中显示一些内容。这可能不通过属性传输数据吗？ my-sub-element1和2只能在my-element的上下文中使用。

我尝试做my-sub-element2，但它返回null，所以我想这不是这样做的方法：）

Answer 1

我希望通过更多细节和演示来补充其他可能正确的答案...

`Polymer.dom(this).querySelectorAll('my-sub-element')`

虽然此方法适用于您的示例用例，但如果您的容器元素包装在另一个容器中，它将会中断，如下所示。在这里，my-element找不到querySelectorAll('my-sub-element1')的任何元素（尽管my-element-wrapper会）。

此外，这限制了元素未来的可扩展性（例如，由无法修改原始元素的第三方），这可能不是您的直接关注。

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.4.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>

<body>
  <my-element-wrapper>
    <my-sub-element1></my-sub-element1>
    <my-sub-element2></my-sub-element2>
  </my-element-wrapper>

  <dom-module id="my-element">
    <template>
      <content></content>
    </template>
    <script>
      Polymer({
        is: 'my-element',
        ready: function() {
          var el = Polymer.dom(this).querySelectorAll('my-sub-element1');
          console.log('my-element > my-sub-element1:',
                      'length=' + el.length,
                      'element=' + (el.length > 0 ? el[0].tagName : "''"));
        }
      });
    </script>
  </dom-module>

  <dom-module id="my-sub-element1">
    <script>
      Polymer({ is: 'my-sub-element1' });
    </script>
  </dom-module>

  <dom-module id="my-sub-element2">
    <script>
      Polymer({ is: 'my-sub-element2' });
    </script>
  </dom-module>

  <dom-module id="my-element-wrapper">
    <template>
      <my-element>
        <content></content>
      </my-element>
    </template>
    <script>
      Polymer({ is: 'my-element-wrapper' });
    </script>
  </dom-module>

</body>

＆＃13;

^jsbin

`Polymer.getContentChildren()`

此方法从容器元素<content>获取分布式子元素，这确实让您更接近灵活的解决方案，因为包装容器（如前面的示例中所示）不会更改其结果。

然而，这会使所有分发的子项成为，因此如果您只对子集感兴趣，那将会很不方便（甚至可能效率低下）。

＆＃13;
＆＃13;
<head> <base href="https://polygit.org/polymer+1.4.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <my-element-wrapper> <my-sub-element1></my-sub-element1> <my-sub-element2></my-sub-element2> </my-element-wrapper> <dom-module id="my-element"> <template> <content></content> </template> <script> Polymer({ is: 'my-element', ready: function() { var el = this.getContentChildren().filter(function(item) { return item.tagName.toLowerCase() === 'my-sub-element1'; }); console.log('my-element > my-sub-element1:', 'length=' + el.length, 'element=' + (el.length > 0 ? el[0].tagName : "''")); } }); </script> </dom-module> <dom-module id="my-sub-element1"> <script> Polymer({ is: 'my-sub-element1' }); </script> </dom-module> <dom-module id="my-sub-element2"> <script> Polymer({ is: 'my-sub-element2' }); </script> </dom-module> <dom-module id="my-element-wrapper"> <template> <my-element> <content></content> </my-element> </template> <script> Polymer({ is: 'my-element-wrapper' }); </script> </dom-module> </body>
＆＃13;
＆＃13;
＆＃13;

^jsbin

Polymer.queryAllEffectiveChildren()

此方法通过CSS选择器获取特定的分布式子项，将上述两种解决方案结合起来。（它似乎也是perform better而不是其他两个。我不是JS性能专家，所以由于实施不当，这些结果可能不准确。）

＆＃13;
＆＃13;
<head> <base href="https://polygit.org/polymer+1.4.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <my-element-wrapper> <my-sub-element1></my-sub-element1> <my-sub-element2></my-sub-element2> </my-element-wrapper> <dom-module id="my-element"> <template> <content></content> </template> <script> Polymer({ is: 'my-element', ready: function() { var el = this.queryAllEffectiveChildren('my-sub-element1'); console.log('my-element > my-sub-element1:', 'length=' + el.length, 'element=' + (el.length > 0 ? el[0].tagName : "''")); } }); </script> </dom-module> <dom-module id="my-sub-element1"> <script> Polymer({ is: 'my-sub-element1' }); </script> </dom-module> <dom-module id="my-sub-element2"> <script> Polymer({ is: 'my-sub-element2' }); </script> </dom-module> <dom-module id="my-element-wrapper"> <template> <my-element> <content></content> </my-element> </template> <script> Polymer({ is: 'my-element-wrapper' }); </script> </dom-module> </body>
＆＃13;
＆＃13;
＆＃13;

^jsbin

Answer 2

我认为Günter的回答是正确的。虽然选择子元素会起作用，但如果您使用<content/>标记，则可能只选择仅分布式节点。我认为这与::content选择器的关系更密切。

以下是Polymer documentation pages的代码段：

<dom-module id="simple-content">
  <template>
    <content id="myContent"></content>
  </template>
  <script>
    Polymer({
      is: 'simple-content',
      ready: function() {
        var distributed = this.getContentChildren('#myContent');
        console.log(distributed.length);
      }
    });
  </script>
</dom-module>

如何在Polymer中访问:: content元素

2 个答案:

`Polymer.dom(this).querySelectorAll('my-sub-element')`

`Polymer.getContentChildren()`

`Polymer.queryAllEffectiveChildren()`