Elements with overlay (e.g. vaadin-date-picker) not working in dialog

I’m trying to use a vaadin-date-picker in a Dialog (in a lit component). When opening the dialog as a modal, the overlay is placed outside of the dialog and apears behind the modal. It can thus not be interacted with. Is there a way around this?

This is the code I use:

import { LitElement, html } from 'lit';
import '@vaadin/vaadin-date-picker';

class HCPTest extends LitElement {
 render() {
    return html`
    <button @click="${() => this.shadowRoot.getElementById('my-dialog').showModal()}">click</button>
    <dialog id="my-dialog"><vaadin-date-picker ></vaadin-date-picker></dialog>`;
  }
}

customElements.define('hcp-test', HCPTest);

I’m using the latest packages (lit 2.3.1, vaadin 23.1.6) and have tried the same thing with other “overlay”-components like select.

Unfortunately, there is no workaround for this. No Vaadin component, which has an overlay, will work together with a modal <dialog> element.

The reason is that the dialog is placed in the browsers native “top layer”, which is always on top of every other content on the page, but all Vaadin overlays are placed as the last elements under the <body> element, and can’t show above the top layer.

This article explains it in more detail: https://developer.chrome.com/blog/what-is-the-top-layer/

To make this work, the <vaadin-overlay> element (which is used internally by components like Date Picker) would need to support a mode where it does not move itself under the <body>, but stays in the same DOM location as the parent component. That does bring other limitations (can’t escape clipping stacking contexts), but it would give developers the option to choose the best mode for their use case.