Question

在将我的聚合物项目从1.x更新到2.0时，我遇到了这个问题

我正在以dom-repeat包装我的一个自定义元素，就像这样

主机

<dom-repeat items="{{customer.hubs}}" as="item">
      <template>
        <paper-card elevation="2" class="hubCard">
          <div style="font-size: 25px;font-weight: bold;line-height: 48px">HUB [[printIndex(customer.hubs,index)]]</div>
          <hub-info hub="{{item}}" isloading="{{isloading}}" refresh-customer="[[refreshCustomer]]"/>
        </paper-card>
      </template>
    </dom-repeat>

自定义元素的部分代码如下所示

自定义元素

<div class="blueButton" id="debugTab" style="padding-top: 10px">
  <dom-if if="{{displayDebugger}}">
  <template>
    <div class="headButton" on-click="toggleDebugger" id="debuggerTab">
     <span>Debugger</span>
      <span style="position: absolute;right: 2%">
    <!--<i id="downArrow4" class="material-icons fa-arrow-down">keyboard_arrow_down</i>-->
    <iron-icon id="downArrow4" icon="icons:arrow-drop-down"></iron-icon>
      </span>
      </div>
</template>
  </dom-if>
<iron-collapse id="collapseDebugger" >
<hub-debugger hub-id="{{hub.hubId}}" isloading="{{isloading}}"></hub-debugger>
</iron-collapse>
  </div>

问题

首先，我试图获得铁崩这个。$。collapseDebugger但是我不能，因为我认为自定义elemrnt hub-info在dom-repeat中我使用this.shadowRoot.querySelector（'＃collapseDebugger'）并访问它。我再次尝试访问iron-icon（在dom-if中再次动态创建）作为this.shadowRoot.querySelector（'＃downArrow4'），但我无法访问它。

如何访问动态元素中的动态节点？如果有动态创作的嵌套怎么办？

Answer 1

this.shadowRoot.querySelector(selector)语法应该有效。

条件模板是否实际呈现？您是否在自定义元素中导入polymer/lib/elements/dom-if.html？如果您只导入polymer/polymer-element.html，则需要这样做。

Polymer：访问动态创建的自定义元素的动态创建节点

1 个答案: