Description
Describe your motivation
In my Lit application, I am using the native dialog element and wanted to add a select inside it. I used the vaadin-select component for it.
Now when I open the select element, the dropdown list is shown at the correct position, however, since the overlay is attached to the body element it makes it not reachable and is rendered behind the dialog. I can imagine the same issue would appear in other similar components such as the vaadin-combo-box.
I know there is a vaadin dialog component, which would solve this issue, but I would prefer to keep using the native dialog element.
Describe the solution you'd like
In the source code the body element is hard coded as the parent element. Perhaps a property allowing the consumer of the component to define their own parent could help solve the problem.
For example: <vaadin-select overlay-parent="${this.dialog}"> or something like that.
And then basically treating that element as the new parent element, instead of the body element.
Describe alternatives you've considered
I have tried the mwc-select from Material Web Components, which correctly renders the list inside the dialog. By changing the dialog's overflow property, it will also make the list look like it's "on top" of the dialog.
Additional context
I have prepared a sandbox where this behaviour can be seen and tested on stackblitz.