Ability to anchor a popover to the native selection rectangle using CSS Anchor Positioning

[michael]

This is up for discussion, but it would be a great thing for editor developers like myself to be able to anchor a popover (using CSS Anchor Positioning) not just to elements in the DOM, but to the native DOM Selection.

Then workarounds like rendering a span to be used as an anchor wouldn't be required anymore (see #516).

Proposal: Use a reserved anchor name (e.g. --dom-selection-rectangle) that the browser sets up automatically and that you can then use to position your popover.

.create-link-popover {
  position-anchor: --dom-selection-rectangle;
  /* other props */
  position: absolute;
  position-area: block-end span-all;
  justify-self: anchor-center;
  pointer-events: auto;
  z-index: 30;
  position-try-fallbacks: flip-block;
}

[michael]

After giving this some more thought, there's one problem with aligning popovers to the native selection:

• What happens when when the focus changes (e.g. you click into an input field inside a "Create link" popover)? The native selection is somewhere else then, so where will the popover align now?

The current solution with additional selection spans allows that the internal selection can have an unfocused state (we still render the span, and use it to position the popover), while having the native selection somewhere else (like in an input field inside the popover)

So I guess for my particular use case, being able to anchor a popover against the native selection might not be enough.

Needs more thought.