Backdrop about dialog-polyfill HOT 3 CLOSED

Firstly note that ::backdrop doesn't support the polyfill, you'll also need + .backdrop for that. The best practice needs two things-

• create a div that covers the entire dialog (position: absolute; width: 100%; height: 100%;), remembering to set the dialog to position: relative to contain it
• add a click handler to the dialog itself

If you see a click on the dialog, i.e. where the event's target is the dialog, you know it must be the backdrop. Otherwise, the event's target would have been the covering div.

from dialog-polyfill.

Closing since this is not an issue.

from dialog-polyfill.

a possible alternative approach that doesn't require div tag soup:

when the dialog is opened:

• attach a click event handler to the body, which takes the event target and traverses up the parentNodes. If a <dialog> element is one of the ancestors, close the dialog

when the dialog is closed:

• detach the body click event handler

from dialog-polyfill.