[Bug Report][3.5.15] v-menu be closed in second time trigger by selecting month or year when used in shadowRoot

[wyhsunflower]

Environment

Vuetify Version: 3.5.15
Last working version: 3.5.15
Vue Version: 3.4.21
Browsers: Chrome 123.0.0.0
OS: Mac OS 10.15.7, Windows

Steps to reproduce

1. Choose one date from "Second DatePicker" which is using in a shadowRoot. For example, Apr.30, it works!
   2.Let's change the Second DatePicker again, If you click the those icons to switch the month or year, the menu will be quickly closed even if using the :close-on-content-click="false" in v-menu.

3. The operations of the above 1 and 2 steps can be successfully completed in the first DatePicker

Expected Behavior

v-menu won't be closed in second time popup if it using in the shadowRoot

Actual Behavior

v-menu was be closed when using in shadowRoot even through using close-on-content-click="false"

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Hi, Vuetify team, since Front-end micro app more and more popular, this could be a common problem, so I did in-depth research about this issue, and we have a result.
The root cause is that the v-clickout directive using the wrong lifecyle, so, I want to try to fix this issue.

[cgodo]

This issue actually affects all components that use VOverlay in the Shadow DOM, like VMenu, for example. The following Playground.vue demonstrates the issue.

Whenever a menu is opened and closed for the first time in the Shadow DOM, the next time trying to open the submenu, everything is closed immediately.

<template>
  <v-menu v-bind="$attrs" location="right">
    <template #activator="{ props }">
      <v-btn v-bind="props" class="ma-5">Normal Menu</v-btn>
    </template>
    <v-list>
      <v-menu location="right">
        <template #activator="{ props }">
          <v-list-item v-bind="props" title="Submenu" />
        </template>
        <v-list>
          <v-list-item title="Submenu item" />
          <v-list-item title="Submenu item" />
        </v-list>
      </v-menu>
    </v-list>
  </v-menu>

  <div ref="shadow" />
</template>

<script>
  import { createApp, h } from 'vue'
  import vuetify from './vuetify'
  import { VBtn, VList, VListItem, VMenu } from 'vuetify/src/components'

  export default {
    name: 'Playground',
    setup () {
      return {

      }
    },
    mounted () {
      const shadowRoot = this.$refs.shadow.attachShadow({ mode: 'open' })
      const shadowApp = document.createElement('div')
      shadowApp.id = 'shadow-app'
      shadowRoot.appendChild(shadowApp)
      document.querySelectorAll('style').forEach(styleElement => {
        shadowRoot.appendChild(styleElement.cloneNode(true))
      })

      createApp({
        render: () => h(VMenu, { location: 'right' }, {
          activator: ({ props }) => h(VBtn, { ...props, class: 'ma-5' }, 'Shadow Menu'),
          default: () => [
            h(VList, {}, () => [
              h(VMenu, { location: 'right' }, {
                activator: ({ props }) => h(VListItem, { ...props, title: 'Submenu' }),
                default: () => [
                  h(VList, {}, () => [
                    h(VListItem, { title: 'Submenu item' }),
                    h(VListItem, { title: 'Submenu item' }),
                  ]),
                ],
              }),
            ]),
          ],
        }),
      })
        .use(vuetify)
        .mount(shadowApp)
    },
  }
</script>