this.shadowRoot.querySelector（'＃upload'）返回始終為null的Polymer 2.x

Question

我在訪問以下dom-if模板中的元素以添加自定義事件偵聽器時遇到問題：

<template is="dom-if" if=[[!uploaded]]>
    <vaadin-upload id="upload" target="http://localhost:3000/uploadFile" form-data-name="doc" max-files="1">
        <iron-icon slot="drop-label-icon" icon="description"></iron-icon>
        <span slot="drop-label">....</span>
    </vaadin-upload>
</template>
<template is="dom-if" if="[[uploaded]]">
      <pdf-element src=[[....]]></pdf-element>
</template> 

我試圖connectedCallback以下方式在connectedCallback為upload-response和upload-success添加事件偵聽器：

connectedCallback() {
    super.connectedCallback();
    console.log(this.shadowRoot.querySelector('#upload'))
    this.shadowRoot.querySelector('#uploadFile').addEventListener('upload-response', event=>this._uploadFile(event))
    this.shadowRoot.querySelector('#uploadFile').addEventListener('upload-success', event=>this._uploadFileSuccessful(event))
  }

默認情況下，上uploaded屬性為false 。 我搜索了Polymer 2.0文檔 ，但沒有找到使其工作的方法。 我總是null 。

我已經在dom-repeat模板中使用this.shadowRoot.querySelector ，沒有問題。 如何使querySelector與dom-if ？

Answer 1

即使if條件為true ， <dom-if>內容仍未在connectedCallback標記，因此您必須等到下一個Polymer.RenderStatus.afterNextRender()渲染幀：

Polymer.RenderStatus.afterNextRender(this, () => {
  const uploader = this.shadowRoot.querySelector('#upload');
  uploader.addEventListener('upload-success', () => { /* ... */ });
});

演示