Bug 269928 – Allow top layer elements to be nested within popovers

• Status: RESOLVED
• Resolution: FIXED
• Component: DOM

[Keith Cirkel]

Tracking issue for https://github.com/whatwg/html/pull/10116 and https://github.com/whatwg/html/issues/9998.

Given some markup like:

```html
<div id=popover popover>
  <button id="openDialog">Open Dialog</button>
  <dialog id=dialog>
    I'm a dialog!
  </dialog>
</div>
<button id="openPopover">Open Popover</button>  
<button>I do nothing!</button>
```

With some JS like

```js
openDialog.onclick = () => {
  dialog.showModal();
}

openPopover.onclick = () => {
  popover.showPopover();
}
```

Clicking the "Open Popover" button followed by the "Open Dialog" button results in both the Dialog and Popover being hidden, however the dialog will still be open as modal, rendering the whole page inert, nothing is clickable and there seems to be no way to undo this (unless you use a CloseWatcher gesture such as the `Esc` key - if you have one available on your device).

Some repro steps:

1. Visit https://codepen.io/keithamus/pen/wvNLKeV (in a browser that supports native popover)
2. Click "Open Popover"
3. Click "Open Dialog"
4. Observe no visible top layer elements, the page is inert and seems to no longer be interactive.

[Radar WebKit Bug Importer]

<rdar://problem/123843641>

[Simon Fraser (smfr)]

https://github.com/WebKit/WebKit/pull/24958

[EWS]

Committed 279874@main (7742091ae260): <https://commits.webkit.org/279874@main>

Reviewed commits have been landed. Closing PR #24958 and removing active labels.