fix(VOverlay): check for Shadow DOM on mount (#19947)

fixes #19943
vuetifyjs · Jun 11, 2024 · e6e76d5 · e6e76d5
1 parent 07a6fb8
commit e6e76d5
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -140,7 +140,6 @@ export const VOverlay = genericComponent<OverlaySlots>()({
         if (!(v && props.disabled)) model.value = v
       },
     })
-    const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained))
     const { themeClasses } = provideTheme(props)
     const { rtlClasses, isRtl } = useRtl()
     const { hasContent, onAfterLeave: _onAfterLeave } = useLazy(props, isActive)
@@ -155,6 +154,9 @@ export const VOverlay = genericComponent<OverlaySlots>()({
       contentEvents,
       scrimEvents,
     } = useActivator(props, { isActive, isTop: localTop })
+    const potentialShadowDomRoot = computed(() => (activatorEl?.value as Element)?.getRootNode() as Element)
+    const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained ||
+      potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false))
     const { dimensionStyles } = useDimension(props)
     const isMounted = useHydration()
     const { scopeId } = useScopeId()