fix(hooks): [use-popper-container] fix namespace (#9655)

packages/components/popper/src/container.ts

@@ -1,22 +0,0 @@
-import { onBeforeMount } from 'vue'
-import { isClient } from '@vueuse/core'
-import { generateId } from '@element-plus/utils'
-
-let cachedContainer: HTMLElement
-
-export const POPPER_CONTAINER_ID = `el-popper-container-${generateId()}`
-
-export const POPPER_CONTAINER_SELECTOR = `#${POPPER_CONTAINER_ID}`
-
-export const usePopperContainer = () => {
-  onBeforeMount(() => {
-    if (!isClient) return
-
-    if (!cachedContainer) {
-      const container = document.createElement('div')
-      container.id = POPPER_CONTAINER_ID
-      document.body.appendChild(container)
-      cachedContainer = container
-    }
-  })
-}

packages/hooks/__tests__/use-popper-container.test.tsx

@@ -2,7 +2,10 @@ import { nextTick } from 'vue'
 import { shallowMount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import * as vueuse from '@vueuse/core'
-import { POPPER_CONTAINER_SELECTOR, usePopperContainer } from '../src/container'
+import {
+  POPPER_CONTAINER_SELECTOR,
+  usePopperContainer,
+} from '../use-popper-container'
 
 const AXIOM = 'rem is the best girl'
 
@@ -14,11 +17,9 @@ vi.mock('@vueuse/core', () => {
 
 const mountComponent = () =>
   shallowMount({
-    template: `<div>
-    ${AXIOM}
-  </div>`,
     setup() {
       usePopperContainer()
+      return () => <div>{AXIOM}</div>
     },
   })
 

packages/hooks/use-popper-container/index.ts

@@ -1,10 +1,16 @@
 import { onBeforeMount } from 'vue'
 import { isClient } from '@vueuse/core'
 import { generateId } from '@element-plus/utils'
+import { useGlobalConfig } from '../use-global-config'
+import { defaultNamespace } from '../use-namespace'
 
 let cachedContainer: HTMLElement
 
-export const POPPER_CONTAINER_ID = `el-popper-container-${generateId()}`
+const namespace = useGlobalConfig('namespace', defaultNamespace)
+
+export const POPPER_CONTAINER_ID = `${
+  namespace.value
+}-popper-container-${generateId()}`
 
 export const POPPER_CONTAINER_SELECTOR = `#${POPPER_CONTAINER_ID}`