[dialog] Opened attribute does not get removed when dialog is closed internally

[admwx7]

Steps to reproduce:

• open a dialoag via setAttribute('opened', '')
• close the dialog via clicking outside or pressing esc

Expected:
Dialog no longer has the attribute opened set

Actual:
Dialog still has opened set in the DOM so code is required to remove then re-add the attribute

Example:
https://jsbin.com/xuxavaq/edit?html,output

In the example the code will set opened, if it is already set then it will fire an alert and remove the attribute from the DOM. I was having layout issues, but the backdrop was still showing when the dialog was open. You can test by clicking the button then pressing esc or clicking on the backdrop, then press the button again and the alert will get fired instead of immediately opening the dialog as you would expect.

[tomivirkki]

Unlike <vaadin-select> for example, <vaadin-dialog> doesn't seem to reflect opened as an attribute. This should be aligned. Nonetheless, it's recommended to use the property for opening the dialog instead dialog.opened = true;

[admwx7]

I updated my code to use both.

This particular component is agnostic and expects the user to supply the dialog via a in the element. Since this was the path we followed for re-usability across teams we needed to support everything from <vaadin-dialog> down to a <div> with div:not([open]) { display: none; } CSS. The only way to perform this consistently was to use setAttribute providing a default name for the attribute along with a way to override it.

[web-padawan]

Fixed in V25 where reflectToAttribute was added to opened property in #9790. Closing.