[Feature Request] Support Shadow DOM in VOverlay-enabled components such as VMenu and VSelect

[Maxim-Mazurok]

Problem to solve

Currently VMenu, VSelect and others by default will be attached to the real DOM and will use styles from the root document instead of using ones from the Shadow DOM. This doesn't work for us because we're migrating from Bootstrap to Vuetify and we can't mix two CSS frameworks.
Possible solution we've explored was using contained or attach=this, however this creates a problem with z-index. For example, when we had a <VSelect contained=true/> - the contents of dropdown were appearing to be behind the <VCheckbox/> that followed select (kinda demo).

Proposed solution

I've created a patch for Veutify v3.1.2 using npx patch-package that will attempt to put VOverlay into the Shadow DOM root node. If this seems like a reasonable solution - I'll be happy to open a PR.

diff --git a/node_modules/vuetify/lib/components/VOverlay/VOverlay.mjs b/node_modules/vuetify/lib/components/VOverlay/VOverlay.mjs
index defc418..fc2df3a 100644
--- a/node_modules/vuetify/lib/components/VOverlay/VOverlay.mjs
+++ b/node_modules/vuetify/lib/components/VOverlay/VOverlay.mjs
@@ -101,7 +102,7 @@ export const VOverlay = genericComponent()({
     });
     const {
       teleportTarget
-    } = useTeleport(computed(() => props.attach || props.contained));
+    } = useTeleport(computed(() => props.attach || props.contained || theRootest.value?.getRootNode() || false));
     const {
       themeClasses
     } = provideTheme(props);
@@ -142,6 +143,7 @@ export const VOverlay = genericComponent()({
       if (v) isActive.value = false;
     });
     const root = ref();
+    const theRootest = ref();
     const contentEl = ref();
     const {
       contentStyles,
@@ -219,7 +221,9 @@ export const VOverlay = genericComponent()({
     }
     useRender(() => {
       var _slots$activator, _slots$default;
-      return _createVNode(_Fragment, null, [(_slots$activator = slots.activator) == null ? void 0 : _slots$activator.call(slots, {
+      return _createVNode(_Fragment, {
+        "ref": theRootest
+      }, [(_slots$activator = slots.activator) == null ? void 0 : _slots$activator.call(slots, {
         isActive: isActive.value,
         props: mergeProps({
           ref: activatorRef

In 3.1.16 change getRootNode() to getRootNode()?.body

[Maxim-Mazurok]

@KaelWD or @johnleider do you mind reopening this one, please? I didn't have a chance to un-stale it.

[KaelWD]

Duplicate of #19943