diff --git a/packages/@headlessui-react/src/hooks/use-root-containers.tsx b/packages/@headlessui-react/src/hooks/use-root-containers.tsx
index c2a598ef84..34bdaa2bfb 100644
--- a/packages/@headlessui-react/src/hooks/use-root-containers.tsx
+++ b/packages/@headlessui-react/src/hooks/use-root-containers.tsx
@@ -43,6 +43,7 @@ export function useRootContainers({
       if (!(container instanceof HTMLElement)) continue // Skip non-HTMLElements
       if (container.id === 'headlessui-portal-root') continue // Skip the Headless UI portal root
       if (container.contains(mainTreeNodeRef.current)) continue // Skip if it is the main app
+      if (container.contains((mainTreeNodeRef.current?.getRootNode() as ShadowRoot)?.host)) continue // Skip if it is the main app (and the component is inside a shadow root)
       if (containers.some((defaultContainer) => container.contains(defaultContainer))) continue // Skip if the current container is part of a container we've already seen (e.g.: default container / portal)
 
       containers.push(container)
diff --git a/packages/playground-react/pages/combobox/combobox-virtual-with-empty-states.tsx b/packages/playground-react/pages/combobox/combobox-virtual-with-empty-states.tsx
index e36c75d32d..baaccaedfe 100644
--- a/packages/playground-react/pages/combobox/combobox-virtual-with-empty-states.tsx
+++ b/packages/playground-react/pages/combobox/combobox-virtual-with-empty-states.tsx
@@ -3,7 +3,6 @@ import { useRef, useState } from 'react'
 import { classNames } from '../../utils/class-names'
 
 import { Button } from '../../components/button'
-import { flushSync } from 'react-dom'
 
 type Option = {
   name: string
@@ -13,32 +12,32 @@ type Option = {
 
 export default function Home() {
   let [list, setList] = useState<Option[]>(() => [
-    {name: 'Alice', disabled: false},
-    {name: 'Bob', disabled: false},
-    {name: 'Charlie', disabled: false},
-    {name: 'David', disabled: false},
-    {name: 'Eve', disabled: false},
-    {name: 'Fred', disabled: false},
-    {name: 'George', disabled: false},
-    {name: 'Helen', disabled: false},
-    {name: 'Iris', disabled: false},
-    {name: 'John', disabled: false},
-    {name: 'Kate', disabled: false},
-    {name: 'Linda', disabled: false},
-    {name: 'Michael', disabled: false},
-    {name: 'Nancy', disabled: false},
-    {name: 'Oscar', disabled: true},
-    {name: 'Peter', disabled: false},
-    {name: 'Quentin', disabled: false},
-    {name: 'Robert', disabled: false},
-    {name: 'Sarah', disabled: false},
-    {name: 'Thomas', disabled: false},
-    {name: 'Ursula', disabled: false},
-    {name: 'Victor', disabled: false},
-    {name: 'Wendy', disabled: false},
-    {name: 'Xavier', disabled: false},
-    {name: 'Yvonne', disabled: false},
-    {name: 'Zachary', disabled: false},
+    { name: 'Alice', disabled: false },
+    { name: 'Bob', disabled: false },
+    { name: 'Charlie', disabled: false },
+    { name: 'David', disabled: false },
+    { name: 'Eve', disabled: false },
+    { name: 'Fred', disabled: false },
+    { name: 'George', disabled: false },
+    { name: 'Helen', disabled: false },
+    { name: 'Iris', disabled: false },
+    { name: 'John', disabled: false },
+    { name: 'Kate', disabled: false },
+    { name: 'Linda', disabled: false },
+    { name: 'Michael', disabled: false },
+    { name: 'Nancy', disabled: false },
+    { name: 'Oscar', disabled: true },
+    { name: 'Peter', disabled: false },
+    { name: 'Quentin', disabled: false },
+    { name: 'Robert', disabled: false },
+    { name: 'Sarah', disabled: false },
+    { name: 'Thomas', disabled: false },
+    { name: 'Ursula', disabled: false },
+    { name: 'Victor', disabled: false },
+    { name: 'Wendy', disabled: false },
+    { name: 'Xavier', disabled: false },
+    { name: 'Yvonne', disabled: false },
+    { name: 'Zachary', disabled: false },
   ])
 
   let emptyOption = useRef({ name: 'No results', disabled: true, empty: true })
@@ -52,10 +51,9 @@ export default function Home() {
       ? list
       : list.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
 
-
   return (
     <div className="mx-auto max-w-fit">
-      <div className="py-8 font-mono text-xs">Selected person: {selectedPerson?.name ?? "N/A"}</div>
+      <div className="py-8 font-mono text-xs">Selected person: {selectedPerson?.name ?? 'N/A'}</div>
       <Combobox
         virtual={{
           options: filtered.length > 0 ? filtered : [emptyOption.current],
@@ -68,12 +66,11 @@ export default function Home() {
           setQuery('')
         }}
         as="div"
-
         // Don't do this lol — it's not supported
         // It's just so we can tab to the "Add" button for the demo
         // The combobox doesn't actually support this behavior
         onKeyDownCapture={(event: KeyboardEvent) => {
-          let addButton = document.querySelector('#add_person')
+          let addButton = document.querySelector('#add_person') as HTMLElement | null
           if (event.key === 'Tab' && addButton && filtered.length === 0) {
             event.preventDefault()
             setTimeout(() => addButton.focus(), 0)
@@ -116,69 +113,76 @@ export default function Home() {
               // It comes with some caveats:
               // like the option callback being called with a null option (which is probably a bug)
               static={filtered.length === 0}
-
               ref={optionsRef}
               className={classNames(
-                "shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5",
+                'shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5',
                 filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
               )}
             >
-              {
-                ({ option }: { option: Option }) => {
-                  if (!option || option.empty) {
-                    return (
-                      <Combobox.Option
-                        // TODO: `disabled` being required is a bug
-                        disabled
-                        // Note: Do NOT use `null` for the `value`
-                        value={option ?? emptyOption.current}
-                        className="relative w-full cursor-default select-none py-2 px-3 focus:outline-none text-center"
-                      >
-                        <div className="grid grid-cols-1 grid-rows-1 h-full relative">
-                          <div className="absolute inset-0">
-                            <svg fill="none" viewBox="0 0 24 24" strokeWidth={0.5} stroke="currentColor" className="text-gray-500/5 -translate-y-1/4">
-                              <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
-                            </svg>
-                          </div>
-                          <div className="z-20 col-start-1 row-start-1 col-span-full row-span-full p-8 flex flex-col justify-center items-center">
-                            <h3 className="mx-2 text-xl mb-4 text-gray-400 font-semibold">No people found</h3>
-                            <button
-                              id="add_person"
-                              type="button"
-                              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:outline-none"
-                              onClick={() => {
-                                let person = { name: query, disabled: false }
-                                setList(list => [...list, person])
-                                setSelectedPerson(person)
-                              }}
-                            >
-                              Add "{query}"
-                            </button>
-                          </div>
-                        </div>
-                      </Combobox.Option>
-                    )
-                  }
-
+              {({ option }: { option: Option }) => {
+                if (!option || option.empty) {
                   return (
                     <Combobox.Option
                       // TODO: `disabled` being required is a bug
-                      disabled={option.disabled}
-                      value={option}
-                      className={({ active }) => {
-                        return classNames(
-                          'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
-                          active ? 'bg-indigo-600 text-white' : 'text-gray-900'
-                        )
-                      }}
+                      disabled
+                      // Note: Do NOT use `null` for the `value`
+                      value={option ?? emptyOption.current}
+                      className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
                     >
-                      <span className='block truncate'>
-                        {option.name}
-                      </span>
+                      <div className="relative grid h-full grid-cols-1 grid-rows-1">
+                        <div className="absolute inset-0">
+                          <svg
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth={0.5}
+                            stroke="currentColor"
+                            className="-translate-y-1/4 text-gray-500/5"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
+                            />
+                          </svg>
+                        </div>
+                        <div className="z-20 col-span-full col-start-1 row-span-full row-start-1 flex flex-col items-center justify-center p-8">
+                          <h3 className="mx-2 mb-4 text-xl font-semibold text-gray-400">
+                            No people found
+                          </h3>
+                          <button
+                            id="add_person"
+                            type="button"
+                            className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                            onClick={() => {
+                              let person = { name: query, disabled: false }
+                              setList((list) => [...list, person])
+                              setSelectedPerson(person)
+                            }}
+                          >
+                            Add "{query}"
+                          </button>
+                        </div>
+                      </div>
                     </Combobox.Option>
                   )
                 }
-              }
+
+                return (
+                  <Combobox.Option
+                    // TODO: `disabled` being required is a bug
+                    disabled={option.disabled}
+                    value={option}
+                    className={({ active }) => {
+                      return classNames(
+                        'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
+                        active ? 'bg-indigo-600 text-white' : 'text-gray-900'
+                      )
+                    }}
+                  >
+                    <span className="block truncate">{option.name}</span>
+                  </Combobox.Option>
+                )
+              }}
             </Combobox.Options>
           </div>
         </div>
diff --git a/packages/playground-vue/src/components/combobox/combobox-virtual-with-empty-states.vue b/packages/playground-vue/src/components/combobox/combobox-virtual-with-empty-states.vue
index bc032da5af..67cc85b81a 100644
--- a/packages/playground-vue/src/components/combobox/combobox-virtual-with-empty-states.vue
+++ b/packages/playground-vue/src/components/combobox/combobox-virtual-with-empty-states.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { Combobox, ComboboxLabel, ComboboxInput, ComboboxOption, ComboboxOptions, ComboboxButton } from '@headlessui/vue'
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+  ComboboxButton,
+} from '@headlessui/vue'
 
 type Option = {
   name: string
@@ -9,32 +16,32 @@ type Option = {
 }
 
 let list = ref([
-  {name: 'Alice', disabled: false},
-  {name: 'Bob', disabled: false},
-  {name: 'Charlie', disabled: false},
-  {name: 'David', disabled: false},
-  {name: 'Eve', disabled: false},
-  {name: 'Fred', disabled: false},
-  {name: 'George', disabled: false},
-  {name: 'Helen', disabled: false},
-  {name: 'Iris', disabled: false},
-  {name: 'John', disabled: false},
-  {name: 'Kate', disabled: false},
-  {name: 'Linda', disabled: false},
-  {name: 'Michael', disabled: false},
-  {name: 'Nancy', disabled: false},
-  {name: 'Oscar', disabled: true},
-  {name: 'Peter', disabled: false},
-  {name: 'Quentin', disabled: false},
-  {name: 'Robert', disabled: false},
-  {name: 'Sarah', disabled: false},
-  {name: 'Thomas', disabled: false},
-  {name: 'Ursula', disabled: false},
-  {name: 'Victor', disabled: false},
-  {name: 'Wendy', disabled: false},
-  {name: 'Xavier', disabled: false},
-  {name: 'Yvonne', disabled: false},
-  {name: 'Zachary', disabled: false},
+  { name: 'Alice', disabled: false },
+  { name: 'Bob', disabled: false },
+  { name: 'Charlie', disabled: false },
+  { name: 'David', disabled: false },
+  { name: 'Eve', disabled: false },
+  { name: 'Fred', disabled: false },
+  { name: 'George', disabled: false },
+  { name: 'Helen', disabled: false },
+  { name: 'Iris', disabled: false },
+  { name: 'John', disabled: false },
+  { name: 'Kate', disabled: false },
+  { name: 'Linda', disabled: false },
+  { name: 'Michael', disabled: false },
+  { name: 'Nancy', disabled: false },
+  { name: 'Oscar', disabled: true },
+  { name: 'Peter', disabled: false },
+  { name: 'Quentin', disabled: false },
+  { name: 'Robert', disabled: false },
+  { name: 'Sarah', disabled: false },
+  { name: 'Thomas', disabled: false },
+  { name: 'Ursula', disabled: false },
+  { name: 'Victor', disabled: false },
+  { name: 'Wendy', disabled: false },
+  { name: 'Xavier', disabled: false },
+  { name: 'Yvonne', disabled: false },
+  { name: 'Zachary', disabled: false },
 ])
 
 let emptyOption = { name: 'No results', disabled: true, empty: true }
@@ -48,18 +55,17 @@ let filtered = computed(() => {
     ? list.value
     : list.value.filter((item) => item.name.toLowerCase().includes(query.value.toLowerCase()))
 })
-
 </script>
 <template>
   <div class="mx-auto max-w-fit">
-    <div class="py-8 font-mono text-xs">Selected person: {{ selectedPerson?.name ?? "N/A" }}</div>
+    <div class="py-8 font-mono text-xs">Selected person: {{ selectedPerson?.name ?? 'N/A' }}</div>
     <Combobox
       :virtual="{
         options: filtered.length > 0 ? filtered : [emptyOption],
         disabled: (option) => option.disabled || option.empty,
       }"
       v-model="selectedPerson"
-      @update:modelValue="() => query = ''"
+      @update:modelValue="() => (query = '')"
       nullable
       as="div"
     >
@@ -70,7 +76,7 @@ let filtered = computed(() => {
       <div class="relative">
         <span class="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
           <ComboboxInput
-            @change="(e) => query = e.target.value"
+            @change="(e) => (query = e.target.value)"
             :displayValue="(option: Option | null) => option?.name ?? ''"
             class="border-none px-3 py-1 outline-none"
           />
@@ -98,24 +104,36 @@ let filtered = computed(() => {
             :ref="optionsRef"
             :class="[
               'shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5',
-              filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
+              filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto',
             ]"
             v-slot="{ option }"
           >
             <template v-if="option.empty">
               <ComboboxOption
                 :value="option"
-                class="relative w-full cursor-default select-none py-2 px-3 focus:outline-none text-center"
+                class="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none"
                 disabled
               >
-                <div class="grid grid-cols-1 grid-rows-1 h-full relative">
+                <div class="relative grid h-full grid-cols-1 grid-rows-1">
                   <div class="absolute inset-0">
-                    <svg fill="none" viewBox="0 0 24 24" stroke-width="0.5" stroke="currentColor" class="text-gray-500/5 -translate-y-1/4">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
+                    <svg
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="0.5"
+                      stroke="currentColor"
+                      class="-translate-y-1/4 text-gray-500/5"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
+                      />
                     </svg>
                   </div>
-                  <div class="z-20 col-start-1 row-start-1 col-span-full row-span-full p-8 flex flex-col justify-center items-center">
-                    <h3 class="mx-2 text-xl mb-4 text-gray-400 font-semibold">No people found</h3>
+                  <div
+                    class="z-20 col-span-full col-start-1 row-span-full row-start-1 flex flex-col items-center justify-center p-8"
+                  >
+                    <h3 class="mx-2 mb-4 text-xl font-semibold text-gray-400">No people found</h3>
                   </div>
                 </div>
               </ComboboxOption>
@@ -129,11 +147,11 @@ let filtered = computed(() => {
               >
                 <div
                   :class="[
-                      'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
-                      active ? 'bg-indigo-600 text-white' : 'text-gray-900'
+                    'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
+                    active ? 'bg-indigo-600 text-white' : 'text-gray-900',
                   ]"
                 >
-                  <span class='block truncate'>
+                  <span class="block truncate">
                     {{ option.name }}
                   </span>
                 </div>