[Bug Report][3.6.9] VOverlay unable to locate target undefined about vuetify HOT 6 OPEN

In our app, this issue prevents menus from working for a period of time, after which they start to work again. I didn't find any particular rhyme or reason to when it would start working again, but we were seeing the same error as posted above. Not to add any pressure or anything, but just to help scope the impact: for us this will prevent any further upgrades to Vuetify until the bug is fixed.

from vuetify.

I'll add the error text so others won't duplicate the issue:

Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

from vuetify.

Seeing a similar issue in unit tests of components that include v-dialogs , where it warns [Vue warn]: Unable to locate target undefined at <VOverlay ref=Ref< <ref *1> {... and then unit tests that open dialogs can't find the components inside the dialog (v-dialog is attach=true in the context of unit tests to allow the tests to find components which worked in vuetify 3.6.8 -- in the app itself the v-dialog is attach=false, and appears to work correctly fwiw)

from vuetify.

+1
VMenu 'attach' prop affected by this as well. Console error shows but it does seem to still work. https://play.vuetifyjs.com/#eNq1UUtuwjAQvcrIm4KEE4l20yggVe22JyAsjGOEhbEtZ5KCoty9EyeFhH1Xmc+b94l3LauCTD+8T5pasYzlqC7eCFTbwgLkpW5AGlFVm4KhuiKXyqIKBYtrAjT8omwNAlHIEzivLHeWn1yjwggh0B8nNLwyDjMhUTcCXSDWFnxwvoLuzjnyHtCCdCaCfNAXEW4FI4aDtmUc0RXdwBcVpfuxkKfx6CGbTrLchw03usK5VD/hmtBEf4yCi75bAUmp65I+0PckB9lZ3WgfFzPHcyKOGo3atm08TGIHXddbfMZMnEy3kxgzy33b//LhfVJ6IKqeouaVDNoPF+rqXUAo1VHUBqEdWEqBIoPFEjZbWIwzGEJmsHtYaiGazODl02h5hm/1At3qP/ewniL2Y9UtY9H1Ue/hWLdir8lbsn5nK1sbs/8Fl+XdMw==

This bit here seems to be a change that brought shadowdom stuff in. Not sure what that's about, but this looks to be what started affecting this.

v3.6.4...v3.6.9#diff-797e0d87fcc4e46ffbe545df7707d4565185aaa039c2f04eaf74a2539b3fc5baR159

packages/vuetify/src/components/VOverlay/VOverlay.tsx:159

about:srcdoc:168 DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify-labs.esm.js:10619:21
    at ReactiveEffect.fn (

from vuetify.

I have errors in v-menu, when multiple v-menu could attach to a component. v-menus cannot show anymore.
Was working before 3.6.8.

<v-menu
    :model-value="isShowSubFunctionMenu"
    :location="tbLocation"
    :disabled="isMenuDisabled"
    :close-on-click="false"
    :close-on-content-click="false"
    persistent
    no-click-animation
    max-width="46"
    offset="10"
    transition="fade-transition"
    z-index="22"
    content-class="overflow-hidden elevation-4 fixedMenu"
    contained
    attach="#mainNav"
    scroll-strategy="reposition"
  >
  <template v-slot:activator="{ props }">
    ...
  </template>
  <div>
    ...
  </div>
</v-meun>

The browser console show this:

Uncaught (in promise) DOMException: Node.appendChild: Cannot have more than one Element child of a Document

Which is from teleport.ts line 29 targetElement.appendChild(container)

• Operating System: Windows_NT
• Node Version: v18.19.0
• Nuxt Version: 3.12.2
• CLI Version: 3.12.0
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, vite, app, css, modules, i18n, runtimeConfig, routeRules, devServer
• Runtime Modules: [email protected], @pinia/[email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: -

from vuetify.

Attach is broken with v-dialog too.

See this Vuetify Snips for reproduction

<v-dialog :attach="true">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props"> broken dialog (attach=true) </v-btn>
  </template>
  <template v-slot:default>
    <v-card title="Dialog">
      <v-card-text> attach=true </v-card-text>
    </v-card>
  </template>
</v-dialog>

from vuetify.