Top Layer Shim

[tlouisse]

In order to make our global overlays handle all issues mentioned here (#1118), we need a solid 'top layer' shim. This shim could be consumed by OverlayController.

What is a top layer?

A top layer is rendered on top of all other UI, regardless of its position in dom.

For more info, consult:

• resarch top layer: explains and discusses the top layer concept
• popup spec explains the need for a top layer
• css top layer proposal: top layer as css primitive

Is it already offered by the platform?

Yes, the <dialog>renders its content on top of all other ui, but it's not supported in all browsers and it's uncertain whether it ever will be in the future.

Approach for shim

• move content to the bottom of the body, inside a shadow root (so inward leaking from global styles won't be possible)
• make sure its surrounding context is copied, so it behaves like it would in 'local dom':
  • css variables work
  • css selectors work (relying on surrounding dom)
  • accessibility: referenced elements are copied as well
  • multi level content projection is detected and handled
  • events are proxied like if they were sent from local dom
  • more...?

For all browsers supporting <dialog>: make use of it as much as possible in the shim. For optimal (network and render) performance, it should be possible to omit the parts of the shim that are not needed when a native dialog is available. The dialog will be spawned in such a way that it's 'neutral' with regard to semantics (no modal etc.)