Polymer 2.0 How to createElement then import with Polymer.importHref and pass data with setAttribute

Question

I am creating an element, importing it and setting attribute with data. I want the code to execute only if the element hasn't been imported and created before. When the function is called I get the following error:

this._dialogPopUp.open is not a function

What is happening is that this._dialogPopUp.open(); is executing before the element is created and imported. If I hit the button for the second time the pop-up works because it has been created and imported before. How can I make it wait for the element to be created and imported and then continue the execution?

Currently I have this implementation:

_loadDialogPopUp(e) {
  let me = this;
  if(!me._dialogPopUp){
    me._dialogPopUp = document.createElement('su-dialog');
    Polymer.importHref(this.resolveUrl('su-dialog.html'), (e) => {
      this.root.appendChild(this._dialogPopUp);
    });
  }
  customElements.whenDefined('su-dialog').then(() => {
    me._dialogPopUp.open();
    me._dialogPopUp.setAttribute('uid', this.user.uid);
  })
}

Answer 1

you will have to check if the element is actually "upgraded" before you can use it's functions. Luckily the standard thought of that.

customElements.whenDefined('su-dialog').then(() => {
  this._dialogPopUp.open();
  this._dialogPopUp.setAttribute('uid', this.user.uid);
});

for more Details see https://developers.google.com/web/fundamentals/architecture/building-components/customelements