fix(VOverlay): App mounted in shadow dom

[joelmandell]

Description

This checks if the target of VOverlay is an shadow dom element and attaches it to that one. This fixes issues when mounting app on shadow dom. This fixes #19943

Markup:

Playground is not provided because this is setup in a different way, it can be examined by the repro here:
https://github.com/joelmandell/shadow_dom

Without applying this PR, v-overlay-container will be attached outside the shadow dom and not working correctly.

[joelmandell]

@MajesticPotatoe I might need a poke in right direction here to perfect this one. Because there is some css-issues still. For example in my repro I use a v-select. The items in the v-select gets dark background color and with darkened text. So there is some more to throw at this one.

[SandroPreuss1234]

@MajesticPotatoe I might need a poke in right direction here to perfect this one. Because there is some css-issues still. For example in my repro I use a v-select. The items in the v-select gets dark background color and with darkened text. So there is some more to throw at this one.

@joelmandell
I use :menu-props="{ attach: getAppRoot() }" on the v-select, to attach the menu to my Shadow Root. I realized the same issue with the darkened text and Chrome dev tools gave me a hint. The CSS variable --v-theme-overlay-multiplier is not defined, which is used in some calculations. Not sure why it is lost and if it has to do with the teleport.
But I was able to solve this by defining some custom CSS override, which works for my use case.

.v-menu .v-list {
  --v-theme-overlay-multiplier: 1
}

Just want to let you know. 😉