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

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>

问题

首先我尝试访问 iron-collapse 作为 this.$.collapseDebugger 但我不能，因为我认为自定义 elemnt hub-info 在 dom-repeat 内，所以我使用了 this.shadowRoot.querySelector('#collapseDebugger') 并访问了它。 我再次尝试以 this.shadowRoot.querySelector('#downArrow4') 的形式访问 iron-icon（它再次在 dom-if 中动态创建），但我无法访问它。

如何访问动态元素内的动态节点？ 如果有嵌套的动态创建呢？

Answer 1

this.shadowRoot.querySelector(selector) 语法应该可以工作。

条件模板真的渲染了吗？您是否在自定义元素中导入 polymer/lib/elements/dom-if.html？这是必需的，如果您仅导入 polymer/polymer-element.html。