diff --git a/packages/radix-vue/src/Dialog/DialogContentImpl.vue b/packages/radix-vue/src/Dialog/DialogContentImpl.vue
index 09050eed7..02c4c29ae 100644
--- a/packages/radix-vue/src/Dialog/DialogContentImpl.vue
+++ b/packages/radix-vue/src/Dialog/DialogContentImpl.vue
@@ -3,7 +3,7 @@ import type {
   DismissableLayerEmits,
   DismissableLayerProps,
 } from '@/DismissableLayer'
-import { useForwardExpose, useId } from '@/shared'
+import { getActiveElement, useForwardExpose, useId } from '@/shared'
 
 export type DialogContentImplEmits = DismissableLayerEmits & {
   /**
@@ -54,8 +54,8 @@ onMounted(() => {
   rootContext.contentElement = contentElement
 
   // Preserve the `DialogTrigger` element in case it was triggered programmatically
-  if (document.activeElement !== document.body)
-    rootContext.triggerElement.value = document.activeElement as HTMLElement
+  if (getActiveElement() !== document.body)
+    rootContext.triggerElement.value = getActiveElement() as HTMLElement
 })
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/radix-vue/src/FocusScope/FocusScope.vue b/packages/radix-vue/src/FocusScope/FocusScope.vue
index 216f301ad..66cc0899d 100644
--- a/packages/radix-vue/src/FocusScope/FocusScope.vue
+++ b/packages/radix-vue/src/FocusScope/FocusScope.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
-import { useForwardExpose } from '@/shared'
+import { getActiveElement, useForwardExpose } from '@/shared'
 
 export type FocusScopeEmits = {
   /**
@@ -142,7 +142,7 @@ watchEffect(async (cleanupFn) => {
   if (!container)
     return
   focusScopesStack.add(focusScope)
-  const previouslyFocusedElement = document.activeElement as HTMLElement | null
+  const previouslyFocusedElement = getActiveElement() as HTMLElement | null
   const hasFocusedCandidate = container.contains(previouslyFocusedElement)
 
   if (!hasFocusedCandidate) {
@@ -155,7 +155,7 @@ watchEffect(async (cleanupFn) => {
       focusFirst(removeLinks(getTabbableCandidates(container)), {
         select: true,
       })
-      if (document.activeElement === previouslyFocusedElement)
+      if (getActiveElement() === previouslyFocusedElement)
         focus(container)
     }
   }
@@ -191,7 +191,7 @@ function handleKeyDown(event: KeyboardEvent) {
 
   const isTabKey
     = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey
-  const focusedElement = document.activeElement as HTMLElement | null
+  const focusedElement = getActiveElement() as HTMLElement | null
 
   if (isTabKey && focusedElement) {
     const container = event.currentTarget as HTMLElement
diff --git a/packages/radix-vue/src/FocusScope/utils.ts b/packages/radix-vue/src/FocusScope/utils.ts
index 44b0b749d..d70ecbde3 100644
--- a/packages/radix-vue/src/FocusScope/utils.ts
+++ b/packages/radix-vue/src/FocusScope/utils.ts
@@ -1,3 +1,5 @@
+import { getActiveElement } from '@/shared'
+
 export const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount'
 export const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount'
 export const EVENT_OPTIONS = { bubbles: false, cancelable: true }
@@ -9,10 +11,10 @@ type FocusableTarget = HTMLElement | { focus: () => void }
  * Stops when focus has actually moved.
  */
 export function focusFirst(candidates: HTMLElement[], { select = false } = {}) {
-  const previouslyFocusedElement = document.activeElement
+  const previouslyFocusedElement = getActiveElement()
   for (const candidate of candidates) {
     focus(candidate, { select })
-    if (document.activeElement !== previouslyFocusedElement)
+    if (getActiveElement() !== previouslyFocusedElement)
       return true
   }
 }
@@ -96,7 +98,7 @@ export function focus(
 ) {
   // only focus if that element is focusable
   if (element && element.focus) {
-    const previouslyFocusedElement = document.activeElement
+    const previouslyFocusedElement = getActiveElement()
     // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
     element.focus({ preventScroll: true })
     // only select if its not the same element, it supports selection and we need to select
diff --git a/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue b/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue
index 798a5ef1d..d4513d2a3 100644
--- a/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue
+++ b/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue
@@ -16,7 +16,7 @@ import { injectListboxRootContext } from './ListboxRoot.vue'
 import { compare, queryCheckedElement } from './utils'
 import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
 import { refAutoReset } from '@vueuse/shared'
-import { findValuesBetween } from '@/shared'
+import { findValuesBetween, getActiveElement } from '@/shared'
 import { getNextMatch } from '@/shared/useTypeahead'
 import { useParentElement } from '@vueuse/core'
 import { useCollection } from '@/Collection'
@@ -186,7 +186,7 @@ rootContext.virtualKeydownHook.on((event) => {
   }
   else if (!intent && !isMetaKey) {
     search.value += event.key
-    const currentIndex = Number(document.activeElement?.getAttribute('data-index'))
+    const currentIndex = Number(getActiveElement()?.getAttribute('data-index'))
     const currentMatch = optionsWithMetadata.value[currentIndex].textContent
     const filteredOptions = optionsWithMetadata.value.map(i => i.textContent)
     const next = getNextMatch(filteredOptions, search.value, currentMatch)
diff --git a/packages/radix-vue/src/Menu/MenuContentImpl.vue b/packages/radix-vue/src/Menu/MenuContentImpl.vue
index 67dce9e3c..467946dcb 100644
--- a/packages/radix-vue/src/Menu/MenuContentImpl.vue
+++ b/packages/radix-vue/src/Menu/MenuContentImpl.vue
@@ -14,6 +14,7 @@ import type { PopperContentProps } from '@/Popper'
 
 import {
   createContext,
+  getActiveElement,
   useArrowNavigation,
   useBodyScrollLock,
   useCollection,
@@ -176,7 +177,7 @@ function handleKeyDown(event: KeyboardEvent) {
 
   const el = useArrowNavigation(
     event,
-    document.activeElement as HTMLElement,
+    getActiveElement() as HTMLElement,
     contentElement.value,
     {
       loop: loop.value,
diff --git a/packages/radix-vue/src/Menu/utils.ts b/packages/radix-vue/src/Menu/utils.ts
index 9fdd2db0a..20e859ded 100644
--- a/packages/radix-vue/src/Menu/utils.ts
+++ b/packages/radix-vue/src/Menu/utils.ts
@@ -1,3 +1,5 @@
+import { getActiveElement } from '@/shared'
+
 export type CheckedState = boolean | 'indeterminate'
 export type Direction = 'ltr' | 'rtl'
 
@@ -35,13 +37,13 @@ export function getCheckedState(checked: CheckedState) {
 }
 
 export function focusFirst(candidates: HTMLElement[]) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement
+  const PREVIOUSLY_FOCUSED_ELEMENT = getActiveElement()
   for (const candidate of candidates) {
     // if focus is already where we want to go, we don't want to keep going through the candidates
     if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
       return
     candidate.focus()
-    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)
+    if (getActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT)
       return
   }
 }
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index f2b66b093..728e271c9 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -5,6 +5,7 @@ import type {
   FocusOutsideEvent,
 } from '@/DismissableLayer'
 import type { PointerDownOutsideEvent } from '@/DismissableLayer/utils'
+import { getActiveElement, useArrowNavigation, useCollection, useForwardExpose } from '@/shared'
 
 type MotionAttribute = 'to-start' | 'to-end' | 'from-start' | 'from-end'
 
@@ -25,7 +26,6 @@ import {
   makeTriggerId,
 } from './utils'
 import { DismissableLayer } from '@/DismissableLayer'
-import { useArrowNavigation, useCollection, useForwardExpose } from '@/shared'
 import { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'
 
 const props = defineProps<NavigationMenuContentImplProps>()
@@ -114,7 +114,7 @@ watchEffect((cleanupFn) => {
     const handleClose = () => {
       menuContext.onItemDismiss()
       itemContext.onRootContentClose()
-      if (content.contains(document.activeElement))
+      if (content.contains(getActiveElement()))
         itemContext.triggerRef.value?.focus()
     }
     content.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose)
@@ -145,7 +145,7 @@ function handleKeydown(ev: KeyboardEvent) {
   const candidates = getTabbableCandidates(ev.currentTarget as HTMLElement)
 
   if (isTabKey) {
-    const focusedElement = document.activeElement
+    const focusedElement = getActiveElement()
     const index = candidates.findIndex(
       candidate => candidate === focusedElement,
     )
@@ -169,7 +169,7 @@ function handleKeydown(ev: KeyboardEvent) {
 
   const newSelectedElement = useArrowNavigation(
     ev,
-    document.activeElement as HTMLElement,
+    getActiveElement() as HTMLElement,
     undefined,
     { itemsArray: candidates, loop: false, enableIgnoredElement: true },
   )
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
index 5dc2f1cea..223c3b0ba 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
-import { createContext, useArrowNavigation, useCollection, useForwardExpose, useId } from '@/shared'
+import { createContext, getActiveElement, useArrowNavigation, useCollection, useForwardExpose, useId } from '@/shared'
 
 export interface NavigationMenuItemProps extends PrimitiveProps {
   /**
@@ -95,7 +95,7 @@ function handleClose() {
 }
 
 function handleKeydown(ev: KeyboardEvent) {
-  const currentFocus = document.activeElement as HTMLElement
+  const currentFocus = getActiveElement() as HTMLElement
   if (ev.keyCode === 32 || ev.key === 'Enter') {
     if (context.modelValue.value === value) {
       handleClose()
diff --git a/packages/radix-vue/src/NavigationMenu/utils.ts b/packages/radix-vue/src/NavigationMenu/utils.ts
index ac47267c3..8d345147f 100644
--- a/packages/radix-vue/src/NavigationMenu/utils.ts
+++ b/packages/radix-vue/src/NavigationMenu/utils.ts
@@ -1,3 +1,5 @@
+import { getActiveElement } from '@/shared'
+
 export type Orientation = 'vertical' | 'horizontal'
 export type Direction = 'ltr' | 'rtl'
 
@@ -48,13 +50,13 @@ export function getTabbableCandidates(container: HTMLElement) {
 }
 
 export function focusFirst(candidates: HTMLElement[]) {
-  const previouslyFocusedElement = document.activeElement
+  const previouslyFocusedElement = getActiveElement()
   return candidates.some((candidate) => {
     // if focus is already where we want to go, we don't want to keep going through the candidates
     if (candidate === previouslyFocusedElement)
       return true
     candidate.focus()
-    return document.activeElement !== previouslyFocusedElement
+    return getActiveElement() !== previouslyFocusedElement
   })
 }
 
diff --git a/packages/radix-vue/src/NumberField/NumberFieldInput.vue b/packages/radix-vue/src/NumberField/NumberFieldInput.vue
index 68706ce3e..0ce26cac8 100644
--- a/packages/radix-vue/src/NumberField/NumberFieldInput.vue
+++ b/packages/radix-vue/src/NumberField/NumberFieldInput.vue
@@ -2,6 +2,7 @@
 import type { PrimitiveProps } from '@/Primitive'
 import { injectNumberFieldRootContext } from './NumberFieldRoot.vue'
 import { onMounted, ref, watch } from 'vue'
+import { getActiveElement } from '@/shared'
 
 export interface NumberFieldInputProps extends PrimitiveProps {
 }
@@ -19,7 +20,7 @@ const rootContext = injectNumberFieldRootContext()
 
 function handleWheelEvent(event: WheelEvent) {
   // only handle when in focus
-  if (event.target !== document.activeElement)
+  if (event.target !== getActiveElement())
     return
 
   // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change
diff --git a/packages/radix-vue/src/PinInput/PinInputInput.vue b/packages/radix-vue/src/PinInput/PinInputInput.vue
index 3e3423c8b..6477998a1 100644
--- a/packages/radix-vue/src/PinInput/PinInputInput.vue
+++ b/packages/radix-vue/src/PinInput/PinInputInput.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
 import { injectPinInputRootContext } from './PinInputRoot.vue'
-import { useArrowNavigation } from '@/shared'
+import { getActiveElement, useArrowNavigation } from '@/shared'
 
 export interface PinInputInputProps extends PrimitiveProps {
   /** Position of the value this input binds to. */
@@ -58,7 +58,7 @@ function resetPlaceholder() {
 }
 
 function handleKeydown(event: KeyboardEvent) {
-  useArrowNavigation(event, document.activeElement as HTMLElement, undefined, {
+  useArrowNavigation(event, getActiveElement() as HTMLElement, undefined, {
     itemsArray: inputElements.value,
     focus: true,
     loop: false,
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
index 622004030..76a3dfe59 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
@@ -12,7 +12,7 @@ export interface RovingFocusItemProps extends PrimitiveProps {
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted } from 'vue'
 import { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'
-import { Primitive, usePrimitiveElement } from '@/Primitive'
+import { Primitive } from '@/Primitive'
 import { focusFirst, getFocusIntent, wrapArray } from './utils'
 import { useId } from '@/shared'
 import { CollectionItem, useCollection } from '@/Collection'
@@ -31,9 +31,6 @@ const isCurrentTabStop = computed(
 
 const { getItems } = useCollection()
 
-const { primitiveElement, currentElement } = usePrimitiveElement()
-const rootNode = computed(() => currentElement.value?.getRootNode() as Document | ShadowRoot)
-
 onMounted(() => {
   if (props.focusable)
     context.onFocusableItemAdd()
@@ -79,7 +76,7 @@ function handleKeydown(event: KeyboardEvent) {
         : candidateNodes.slice(currentIndex + 1)
     }
 
-    nextTick(() => focusFirst(candidateNodes, false, rootNode.value))
+    nextTick(() => focusFirst(candidateNodes))
   }
 }
 </script>
@@ -87,7 +84,6 @@ function handleKeydown(event: KeyboardEvent) {
 <template>
   <CollectionItem>
     <Primitive
-      ref="primitiveElement"
       :tabindex="isCurrentTabStop ? 0 : -1"
       :data-orientation="context.orientation.value"
       :data-active="active"
diff --git a/packages/radix-vue/src/RovingFocus/utils.ts b/packages/radix-vue/src/RovingFocus/utils.ts
index ff80de921..a533edf21 100644
--- a/packages/radix-vue/src/RovingFocus/utils.ts
+++ b/packages/radix-vue/src/RovingFocus/utils.ts
@@ -1,3 +1,5 @@
+import { getActiveElement } from '@/shared'
+
 export type Orientation = 'horizontal' | 'vertical'
 export type Direction = 'ltr' | 'rtl'
 
@@ -40,14 +42,14 @@ export function getFocusIntent(
   return MAP_KEY_TO_FOCUS_INTENT[key]
 }
 
-export function focusFirst(candidates: HTMLElement[], preventScroll = false, rootNode?: Document | ShadowRoot) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = rootNode?.activeElement ?? document.activeElement
+export function focusFirst(candidates: HTMLElement[], preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = getActiveElement()
   for (const candidate of candidates) {
     // if focus is already where we want to go, we don't want to keep going through the candidates
     if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
       return
     candidate.focus({ preventScroll })
-    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)
+    if (getActiveElement() !== PREVIOUSLY_FOCUSED_ELEMENT)
       return
   }
 }
diff --git a/packages/radix-vue/src/Select/SelectItem.vue b/packages/radix-vue/src/Select/SelectItem.vue
index 24526b635..217446500 100644
--- a/packages/radix-vue/src/Select/SelectItem.vue
+++ b/packages/radix-vue/src/Select/SelectItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
-import { createContext, useForwardExpose, useId } from '@/shared'
+import { createContext, getActiveElement, useForwardExpose, useId } from '@/shared'
 
 interface SelectItemContext {
   value: string
@@ -84,7 +84,7 @@ async function handlePointerLeave(event: PointerEvent) {
   await nextTick()
   if (event.defaultPrevented)
     return
-  if (event.currentTarget === document.activeElement)
+  if (event.currentTarget === getActiveElement())
     contentContext.onItemLeave?.()
 }
 
diff --git a/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue b/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue
index a95470863..f85ab24de 100644
--- a/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue
+++ b/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue
@@ -2,7 +2,7 @@
 import { onBeforeUnmount, ref, watchEffect } from 'vue'
 import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { Primitive } from '@/Primitive'
-import { useCollection } from '@/shared'
+import { getActiveElement, useCollection } from '@/shared'
 
 export type SelectScrollButtonImplEmits = {
   autoScroll: []
@@ -24,7 +24,7 @@ function clearAutoScrollTimer() {
 
 watchEffect(() => {
   const activeItem = collectionItems.value.find(
-    item => item === document.activeElement,
+    item => item === getActiveElement(),
   )
   activeItem?.scrollIntoView({ block: 'nearest' })
 })
diff --git a/packages/radix-vue/src/Stepper/StepperTrigger.vue b/packages/radix-vue/src/Stepper/StepperTrigger.vue
index d3889f5dc..ba42c2711 100644
--- a/packages/radix-vue/src/Stepper/StepperTrigger.vue
+++ b/packages/radix-vue/src/Stepper/StepperTrigger.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
-import { useArrowNavigation, useForwardExpose, useKbd } from '@/shared'
+import { getActiveElement, useArrowNavigation, useForwardExpose, useKbd } from '@/shared'
 import { computed, onMounted, onUnmounted } from 'vue'
 
 export interface StepperTriggerProps extends PrimitiveProps {
@@ -54,7 +54,7 @@ function handleKeyDown(event: KeyboardEvent) {
     rootContext.changeModelValue(itemContext.step.value)
 
   if ([kbd.ARROW_LEFT, kbd.ARROW_RIGHT, kbd.ARROW_UP, kbd.ARROW_DOWN].includes(event.key)) {
-    useArrowNavigation(event, document.activeElement as HTMLElement, undefined, {
+    useArrowNavigation(event, getActiveElement() as HTMLElement, undefined, {
       itemsArray: stepperItems.value,
       focus: true,
       loop: false,
diff --git a/packages/radix-vue/src/Toast/ToastRootImpl.vue b/packages/radix-vue/src/Toast/ToastRootImpl.vue
index 24ce5fc53..56116971f 100644
--- a/packages/radix-vue/src/Toast/ToastRootImpl.vue
+++ b/packages/radix-vue/src/Toast/ToastRootImpl.vue
@@ -2,7 +2,7 @@
 import { isClient } from '@vueuse/shared'
 import type { PrimitiveProps } from '@/Primitive'
 import type { SwipeEvent } from './utils'
-import { createContext, useForwardExpose } from '@/shared'
+import { createContext, getActiveElement, useForwardExpose } from '@/shared'
 
 export type ToastRootImplEmits = {
   close: []
@@ -98,7 +98,7 @@ function startTimer(duration: number) {
 function handleClose() {
   // focus viewport if focus is within toast to read the remaining toast
   // count to SR users and ensure focus isn't lost
-  const isFocusInToast = currentElement.value?.contains(document.activeElement)
+  const isFocusInToast = currentElement.value?.contains(getActiveElement())
   if (isFocusInToast)
     providerContext.viewport.value?.focus()
 
diff --git a/packages/radix-vue/src/Toast/ToastViewport.vue b/packages/radix-vue/src/Toast/ToastViewport.vue
index f28108646..8cb398a79 100644
--- a/packages/radix-vue/src/Toast/ToastViewport.vue
+++ b/packages/radix-vue/src/Toast/ToastViewport.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { ComponentPublicInstance } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
+import { getActiveElement, useCollection, useForwardExpose } from '@/shared'
 
 export interface ToastViewportProps extends PrimitiveProps {
   /**
@@ -25,7 +26,6 @@ import { injectToastProviderContext } from './ToastProvider.vue'
 import { onKeyStroke, unrefElement } from '@vueuse/core'
 import FocusProxy from './FocusProxy.vue'
 import { focusFirst, getTabbableCandidates } from '@/FocusScope/utils'
-import { useCollection, useForwardExpose } from '@/shared'
 import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './utils'
 import { DismissableLayerBranch } from '@/DismissableLayer'
 
@@ -84,7 +84,7 @@ watchEffect((cleanupFn) => {
     }
 
     const handlePointerLeaveResume = () => {
-      const isFocusInside = viewport.contains(document.activeElement)
+      const isFocusInside = viewport.contains(getActiveElement())
       if (!isFocusInside)
         handleResume()
     }
@@ -97,7 +97,7 @@ watchEffect((cleanupFn) => {
       const isTabKey = event.key === 'Tab' && !isMetaKey
 
       if (isTabKey) {
-        const focusedElement = document.activeElement
+        const focusedElement = getActiveElement()
         const isTabbingBackwards = event.shiftKey
         const targetIsViewport = event.target === viewport
 
diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index f4aef8eed..2840a34f3 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -26,7 +26,7 @@ import { RovingFocusItem } from '@/RovingFocus'
 import { injectTreeRootContext } from './TreeRoot.vue'
 import { computed } from 'vue'
 import { useCollection } from '@/Collection'
-import { handleAndDispatchCustomEvent } from '@/shared'
+import { getActiveElement, handleAndDispatchCustomEvent } from '@/shared'
 import { flatten } from './utils'
 
 defineOptions({
@@ -81,7 +81,7 @@ function handleKeydownRight(ev: KeyboardEvent) {
   if (isExpanded.value) {
     // go to first child
     const collection = getItems().map(i => i.ref)
-    const currentElement = document.activeElement as HTMLElement
+    const currentElement = getActiveElement() as HTMLElement
     const currentIndex = collection.indexOf(currentElement)
     const list = [...collection].slice(currentIndex)
     const nextElement = list.find(el => Number(el.getAttribute('data-indent')) === (props.level + 1))
@@ -103,7 +103,7 @@ function handleKeydownLeft(ev: KeyboardEvent) {
   else {
     // go back to parent
     const collection = getItems().map(i => i.ref)
-    const currentElement = document.activeElement as HTMLElement
+    const currentElement = getActiveElement() as HTMLElement
     const currentIndex = collection.indexOf(currentElement)
     const list = [...collection].slice(0, currentIndex).reverse()
     const parentElement = list.find(el => Number(el.getAttribute('data-indent')) === (props.level - 1))
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index af51bf1a2..9ef165619 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { createContext, useDirection, useSelectionBehavior, useTypeahead } from '@/shared'
+import { createContext, getActiveElement, useDirection, useSelectionBehavior, useTypeahead } from '@/shared'
 import type { Direction } from '@/shared/types'
 import { flatten } from './utils'
 
@@ -179,7 +179,7 @@ function handleKeydownNavigation(event: KeyboardEvent) {
   nextTick(() => {
     handleMultipleReplace(
       intent,
-      document.activeElement,
+      getActiveElement(),
       rovingFocusGroupRef.value?.getItems!,
       expandedItems.value.map(i => i.value),
     )
diff --git a/packages/radix-vue/src/Tree/TreeVirtualizer.vue b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
index 25ebbed36..31bf5a499 100644
--- a/packages/radix-vue/src/Tree/TreeVirtualizer.vue
+++ b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
@@ -15,6 +15,7 @@ import { refAutoReset, useParentElement } from '@vueuse/core'
 import { getNextMatch } from '@/shared/useTypeahead'
 import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
 import { useCollection } from '@/Collection'
+import { getActiveElement } from '@/shared'
 
 const props = defineProps<TreeVirtualizerProps>()
 
@@ -130,7 +131,7 @@ rootContext.virtualKeydownHook.on((event) => {
     })
   }
   else if (intent === 'prev' && event.key !== 'ArrowUp') {
-    const currentElement = document.activeElement as HTMLElement
+    const currentElement = getActiveElement() as HTMLElement
     const currentIndex = Number(currentElement.getAttribute('data-index'))
     const currentLevel = Number(currentElement.getAttribute('data-indent'))
     const list = rootContext.expandedItems.value.slice(0, currentIndex).map((item, index) => ({ ...item, index })).reverse()
@@ -141,7 +142,7 @@ rootContext.virtualKeydownHook.on((event) => {
   }
   else if (!intent && !isMetaKey) {
     search.value += event.key
-    const currentIndex = Number(document.activeElement?.getAttribute('data-index'))
+    const currentIndex = Number(getActiveElement()?.getAttribute('data-index'))
     const currentMatch = optionsWithMetadata.value[currentIndex].textContent
     const filteredOptions = optionsWithMetadata.value.map(i => i.textContent)
     const next = getNextMatch(filteredOptions, search.value, currentMatch)
@@ -153,7 +154,7 @@ rootContext.virtualKeydownHook.on((event) => {
 
   nextTick(() => {
     if (event.shiftKey && intent)
-      rootContext.handleMultipleReplace(intent, document.activeElement, getItems, rootContext.expandedItems.value.map(i => i.value))
+      rootContext.handleMultipleReplace(intent, getActiveElement(), getItems, rootContext.expandedItems.value.map(i => i.value))
   })
 })
 </script>
diff --git a/packages/radix-vue/src/shared/getActiveElement.test.ts b/packages/radix-vue/src/shared/getActiveElement.test.ts
new file mode 100644
index 000000000..a0668fa4b
--- /dev/null
+++ b/packages/radix-vue/src/shared/getActiveElement.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { getActiveElement } from './getActiveElement'
+
+describe('getActiveElement', () => {
+  it('should return the active element when it is a regular element', () => {
+    const element = createFocusableElement()
+    document.body.appendChild(element)
+    element.focus()
+
+    expect(getActiveElement()).toBe(element)
+
+    document.body.removeChild(element)
+  })
+
+  it('should return the deepest active element in shadow DOM', () => {
+    const host = createShadowDom()
+    const hostElement = createFocusableElement()
+    host.shadowRoot?.appendChild(hostElement)
+
+    const nested = createShadowDom()
+    const nestedElement = createFocusableElement()
+    nested.shadowRoot?.appendChild(nestedElement)
+
+    host.shadowRoot?.appendChild(nested)
+
+    document.body.appendChild(host)
+
+    nestedElement.focus()
+
+    expect(getActiveElement()).toBe(nestedElement)
+
+    document.body.removeChild(host)
+  })
+})
+
+function createFocusableElement() {
+  const button = document.createElement('button')
+  button.innerText = 'Test Button'
+
+  return button
+}
+
+function createShadowDom() {
+  const host = document.createElement('div')
+  host.attachShadow({ mode: 'open' })
+
+  return host
+}
diff --git a/packages/radix-vue/src/shared/getActiveElement.ts b/packages/radix-vue/src/shared/getActiveElement.ts
new file mode 100644
index 000000000..12bc6b45a
--- /dev/null
+++ b/packages/radix-vue/src/shared/getActiveElement.ts
@@ -0,0 +1,12 @@
+export function getActiveElement(): Element | null {
+  let activeElement = document.activeElement
+  if (activeElement == null) {
+    return null
+  }
+
+  while (activeElement != null && activeElement.shadowRoot != null && activeElement.shadowRoot.activeElement != null) {
+    activeElement = activeElement.shadowRoot.activeElement
+  }
+
+  return activeElement
+}
diff --git a/packages/radix-vue/src/shared/index.ts b/packages/radix-vue/src/shared/index.ts
index a7dc5936e..f4eb59834 100644
--- a/packages/radix-vue/src/shared/index.ts
+++ b/packages/radix-vue/src/shared/index.ts
@@ -31,3 +31,4 @@ export { useStateMachine } from './useStateMachine'
 export { useTypeahead } from './useTypeahead'
 export { withDefault } from './withDefault'
 export { useKbd, useTestKbd } from './useKbd'
+export { getActiveElement } from './getActiveElement'
diff --git a/packages/radix-vue/src/shared/trap-focus.ts b/packages/radix-vue/src/shared/trap-focus.ts
index c3d95e6d2..f6601df0b 100644
--- a/packages/radix-vue/src/shared/trap-focus.ts
+++ b/packages/radix-vue/src/shared/trap-focus.ts
@@ -1,3 +1,5 @@
+import { getActiveElement } from './getActiveElement'
+
 export function trapFocus(element: HTMLElement) {
   if (element) {
     const focusableEls = [
@@ -25,14 +27,14 @@ export function trapFocus(element: HTMLElement) {
         return
 
       if (e.shiftKey) {
-        /* shift + tab */ if (document.activeElement === firstFocusableEl) {
+        /* shift + tab */ if (getActiveElement() === firstFocusableEl) {
           lastFocusableEl.focus()
           e.preventDefault()
         }
       }
       else {
       /* tab */
-        if (document.activeElement === lastFocusableEl) {
+        if (getActiveElement() === lastFocusableEl) {
           firstFocusableEl.focus()
           e.preventDefault()
         }
diff --git a/packages/radix-vue/src/shared/useTypeahead.ts b/packages/radix-vue/src/shared/useTypeahead.ts
index a17243282..ae40c24f7 100644
--- a/packages/radix-vue/src/shared/useTypeahead.ts
+++ b/packages/radix-vue/src/shared/useTypeahead.ts
@@ -1,5 +1,6 @@
 import { refAutoReset } from '@vueuse/shared'
 import type { Ref } from 'vue'
+import { getActiveElement } from './getActiveElement'
 
 const ITEM_TEXT_ATTR = 'data-item-text'
 
@@ -14,7 +15,7 @@ export function useTypeahead(collections?: Ref<HTMLElement[]>) {
 
     search.value = search.value + key
     const items = collections?.value ?? fallback!
-    const currentItem = document.activeElement
+    const currentItem = getActiveElement()
 
     const itemsWithTextValue = items.map(el => ({
       ref: el,