UI Balloons are hidden behind native <dialog> due to Top Layer stacking context

[nweevers]

📝 Provide a description of the improvement

Current behavior
Currently, CKEditor 5 renders balloons and floating UI components (such as the link balloon, emoji picker, and autocomplete panels) within a container in the standard DOM (usually appended to body). These elements rely on z-index for stacking.

When the editor is placed inside a native HTML element, these balloons are rendered behind the dialog. This happens because the element is promoted to the browser's top layer, which sits above the entire document's stacking context. Traditional z-index values cannot move an element from the document body into or above the top layer.

Proposed change
We would like CKEditor 5 to utilize the native HTML Popover API for its floating UI components.

By applying the popover attribute to balloons, they would also be promoted to the top layer. This would natively resolve stacking conflicts with other top-layer elements like or other popovers, without requiring complex manual z-index or DOM-nesting workarounds.

📃 Other details

• Browser: All modern browsers supporting the Popover API and (Chrome 114+, Edge 114+, Firefox 125+, Safari 17+).
• OS: All
• CKEditor version: v42.0.0+ (CKEditor 5)
• Installed CKEditor plugins: Link, Emoji, Mention, and any other plugin utilizing the BalloonPanelView.

It was already an issue before: #14747

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Witoso]

Thanks for the suggestion. @pszczesniak @oleq @Reinmar @andrzejkala probably useful to take this into account in our discussion around theme recently.

By applying the popover attribute to balloons

That said, the current browser compatibility would be a blocker currently AFAIU, as we only introduce things that are in a widely available status.

[nweevers]

Thanks for the quick response! I completely understand the commitment to widely available standards.

However, since the native element itself is already widely available (Baseline), CKEditor currently faces a structural compatibility issue where balloons remain hidden behind the dialog's Top Layer.

Perhaps this could be approached via Progressive Enhancement?

If the browser supports the Popover API (feature detection via 'showPopover' in HTMLElement.prototype), the editor could optionally apply the popover attribute to the BalloonPanelView. This would:

1. Solve the issue for users on modern browsers who are already using .
2. Maintain full backward compatibility for older browsers by falling back to the current z-index based rendering.

By making this a conditional enhancement (or even an opt-in configuration flag), CKEditor remains compatible with legacy systems while becoming 'Top Layer aware' for modern web applications.

Would such a hybrid approach be something the team would consider as part of the theme discussions?

[Witoso]

To be honest, I'm not sure right now. Even as a progressive enhancement, this looks like a significant and deep system change we would need to maintain, test, and support.

It's a progressive enhancement, but on top of a large architectural shift for quite a complex set of functionalities (editor's UI), so enhancement looks a bit like an oxymoron here. But @oleq @pszczesniak you may know better.