Calling open() on paper-dialog element shows only the backdrop

[CodeRedPaul]

Description

Hi there. This is an URGENT need as part of a code test for a job app and at the same time, an up-skilling of my programming, so any assistance you can provide would help heaps! I'm really close to the deadline... :)

I've added the \<paper-dialog> element to my component and am calling it's open() method but only the backdrop appears.

I am using Polymer 3.0. According to https://github.com/Polymer/polymer-modulizer/blob/master/docs/polymer-3-element-status.md paper-dialog should be working fine.

Expected outcome

The content in the element should show on top of the backdrop

Actual outcome

No content appears.

Live Demo

Click on the round paper-fab button at the bottom right of the following site:

https://code-red-solutions.github.io/NPS-CodeTest/

Click the button:

And see only the backdrop:

Steps to reproduce

With an existing working component, that has some UI the user can click:

1. Add the paper-dialog element and content to the template for the class that extends PolymerElement and add an on-click event

BEFORE: static get template() { return html`

<style is="custom-style">

paper-fab {
  margin: var(--nps-margin, );
  z-index: var(--nps-zindex, 99);
  position: fixed;
  top: var(--nps-top);
  bottom: var(--nps-bottom, 10px);
  left: var(--nps-left);
  right: var(--nps-right, 10px);
  --paper-fab-background: var(--nps-background-color, #FFE787);
  color: var(--nps-foreground-color, lightgrey);
}

paper-fab:hover {
  --paper-fab-background: var(--nps-background-hover-colour, #f2c40e);
  color: var(--nps-foreground-hover-colour, black);
}

</style>

<paper-fab icon="icons:{{iconType}}" />

AFTER: static get template() { return html`

<style is="custom-style">

paper-fab {
  margin: var(--nps-margin, );
  z-index: var(--nps-zindex, 99);
  position: fixed;
  top: var(--nps-top);
  bottom: var(--nps-bottom, 10px);
  left: var(--nps-left);
  right: var(--nps-right, 10px);
  --paper-fab-background: var(--nps-background-color, #FFE787);
  color: var(--nps-foreground-color, lightgrey);
}

paper-fab:hover {
  --paper-fab-background: var(--nps-background-hover-colour, #f2c40e);
  color: var(--nps-foreground-hover-colour, black);
}

</style>

<paper-fab icon="icons:{{iconType}}" on-click="widgetClicked"/>

<paper-dialog id="modal" modal>
<h2>Header</h2>
  Lorem ipsum...
<div class="buttons">
  <paper-button dialog-dismiss>Cancel</paper-button>
  <paper-button dialog-confirm autofocus>Accept</paper-button>
</div>
</paper-dialog>

2. Wire up the onclick event of the UI element to call open() on the paper-dialog:

   widgetClicked() {
   console.log('widget clicked');
   this.$.modal.open();
   this.iconType = this.iconType === 'help' ? 'feedback' : 'help';
   }

3. Open the page in a browser and click on the UI element to open the paper-dialog

Browsers Affected

• [X] Chrome
• [X] Firefox
• [ ] Safari 9 --Not tested
• [ ] Safari 8 --Not tested
• [ ] Safari 7 --Not tested
• [X] Edge
• [ ] IE 11 --Not tested
• [ ] IE 10 --Not tested

Observations

What's really weird is that I've tried to inspect the DOM and I can see that the \<paper-dialog> element is INSIDE the \<paper-fab> element, despite this clearly NOT being the case in the template... Here's the DOM:

And, again, the code in the template, with the \<paper-dialog> element clearly AFTER the \<paper-fab>:

<paper-fab icon="icons:{{iconType}}" on-click="widgetClicked"/>

<paper-dialog id="modal" modal>

Can anyone help me work out why the content isn't showing, please?

BTW - The source is available on GitHub: https://github.com/code-red-solutions/NPS-CodeTest/blob/master/source/UX/CodeRed-NPS-Widget/src/nps-widget/components/NpsWidget.js

Thanks in advance,

Paul

[CodeRedPaul]

Oh my gosh... As an afterthought, I was just considering how I had been closing the \<paper-fab> element like this:

<paper-fab icon="icons:{{iconType}}" on-click="widgetClicked"/>

So I changed it to this:

<paper-fab icon="icons:{{iconType}}" on-click="widgetClicked"></paper-fab>

And now it bloody works! Really? Sigh... That only cost me 4 hours.

For curiosity's sake... Anyone know why?

Cheers.

[valdrinkoshi]

The parser finds a new tag opening (paper-dialog) before it can realize that it should close the previous tag (paper-fab) In general, you should always close the custom element tags, the /> is not a valid way to close custom elements tags

[CodeRedPaul]

Interesting, thanks @valdrinkoshi

[LeongTitanFour]

Hi. I copy it from your code when it is good function but it shows the backdrop only. Please help me , thank you