[Feature Request]: Support top-layer / dialog HTML component

[daibhin]

Preflight Checklist

• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

What package is this feature request for?

rrweb

Problem Description

RRWeb incorrectly positions the dialog modal.

Created a reproducible example where the modal should appear center vertical / horizontal in the body (as is circled using the mouse) but is aligned top in the replay:
https://rrwebdebug.com/play/index.html?url=http://jsonblob.com/1191711996356976640&version=2.0.0-alpha.11&virtual-dom=on&play=on

Proposed Solution

Support the top layer to layout the modal separately to the rest of the dom

Alternatives Considered

None

Additional Information

No response

[Juice10]

Just bumped into this issue myself as well.

I suggest we record the open attribute as something special like _rr_open="modal" if showModal was called to open the dialog box in this way.
Also we can call dialogEl.matches('dialog:modal') to check if the element was triggered with showModal or not.

For popover elements can listen to the toggle event and check .matches('[popover]:popover-open') to see if popover was opened. Or we could monkey patch HTMLElement.hidePopover() HTMLElement.showPopover() HTMLElement.togglePopover() to listen for toggles.

requestFullscreen is a bit tricker.

[hpvd]

+1 on this.
We should be aware that in some UIs, there are cases where several layers of modals open above each other and it looks like:

[Juice10]

@hpvd good point, however I haven't been able to find any way of accessing the order of opened dialog boxes. For full snapshots that's unlucky, for incremental snapshots it should be much easier to capture/replay this.