聚合物查询选择器无法在聚合物元素中找到自定义聚合物元素

安德森

我正在尝试通过querySelector或等效方法在另一个元素中定义一个自定义的Polymer元素。我的代码如下:

<polymer-element name="component-elem">
<!-- custom elem here -->
<ajax-service id="testComp"></ajax-service>
<template>

</template>
<script>
Polymer({
ready: function(){
    var x = this.shadowRoot.querySelector('#testComp');
    console.log(x); //always prints null

}
});
</script>

</polymer-element>

我已经看到了很多堆栈溢出的帖子,这些帖子与我要完成的任务类似,但是并没有取得很好的效果,我也尝试过:

this.$.testComp

this.shadowRoot.querySelectorAll('#testComp')

确实返回了一个对象,但是我不清楚如何使用结果。

我的最终目标是添加一个自定义事件侦听器,以侦听从该<ajax-service>元素触发的事件

我希望通过使用模板repeat = {{{response}}将Ajax-service元素的结果处理为重复元素。我不希望Ajax-service元素重复,因此Ajax-service在模板之外。

谁能提供任何建议?

吉米面团10
<polymer-element name="component-elem">
<!-- custom elem here -->
<template>
  <ajax-service id="testComp"></ajax-service>

  <template repeat="{{response}}">
    // html for looped items
    <template if="{{response.data}}">
      // do something with response.data
    </template>
  </template>
</template>
<script>
  Polymer({
    ready: function(){
      var x = this.shadowRoot.querySelector('#testComp');
      console.log(x); //always prints null

     }
  });
</script>

</polymer-element>

问题是由于您的元素模板中没有ajax元素。自定义元素中的第一个模板是Shadowdom的起始位置。因此,要使用这些选择器选择的任何项目都必须位于元素的第一个模板中。稍后在元素原始模板中使用重复模板。

请注意,可以像上面的示例一样嵌套模板。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章