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

Polymer querySelector can't find custom polymer element in polymer element

本文关键字：聚合物 元素 找不到 自定义 查询 选择器      更新时间：2023-09-26

我正在尝试通过querySelector或等效项在另一个元素中定义自定义聚合物元素。 我拥有的代码如下：

<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 在模板之外。

谁能给出任何建议？

<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 开始的地方。 因此，对于要使用这些选择器选择的任何项，它必须位于元素的第一个模板中。 稍后在元素原始模板中使用重复模板。

请记住，模板可以像上面的例子一样嵌套。

相关文章：