Polymer 3 paper-dialog: Uncaught TypeError: Cannot read property 'dialog' of undefined

Question

what's wrong? please tell me I tried to run from the button - it does not work. maybe something is not connected? but there is nothing in the logs

import '@polymer/paper-dialog/paper-dialog.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
class BuildingForm extends PolymerElement {
  static get template() {
    return html`
      <paper-dialog id="dialog" with-backdrop="">
        <h2>header</h2>
        <div>Dialog body</div>
      </paper-dialog>
    `;
  }
  ready(){
    window.addEventListener('openBuildingForm', e => {
        this.openDialog();
    });
  }
  static get properties() {
    return {
      BuildingFormHeader: String,
    }
  }
  openDialog(){
    this.$.dialog.toggle();
  }
}
customElements.define('building-form', BuildingForm);

Answer 1

You are missing super.ready() call inside ready() function. This is required because you are extending PolymerElement.

ready() {
    super.ready();
    /* ..and your code.. */
}

more info here: https://polymer-library.polymer-project.org/3.0/docs/devguide/custom-elements