While working on a project, I encountered an issue where I was creating and importing an element while setting attributes with data. The code should only execute if the element hasn't been imported or created previously. However, each time I called the function, I received the error message:
this._dialogPopUp.open is not a function
The problem seems to be that this._dialogPopUp.open(); is being called before the element is fully created and imported. On subsequent button clicks, the pop-up works fine because the element has already been created and imported. How can I modify the code to wait for the element to finish being created and imported before continuing with the execution?
This is the current implementation I have:
_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);
})
}