fix(hooks): PopperContainer cannot be recreated when body is recreated (#18121)

In the micro-front-end scenario, the body is recreated; Because PopperContainer determines that the
cache exists and does not recreate it, teleport cannot find the element to mount.

closed #18115,#17710

Co-authored-by: chenjingwen <chenjingwen@sie.com>

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

@@ -36,7 +36,23 @@ describe('usePopperContainer', () => {
     const { vm } = mountComponent()
     await nextTick()
     const { selector } = vm
-    expect(document.body.querySelector(selector.value)).toBeDefined()
+    expect(
+      document.body.querySelector(selector)?.id === selector.slice(1)
+    ).toBeTruthy()
+  })
+
+  it('should append container from the DOM root again when container is destroyed', async () => {
+    mountComponent()
+    await nextTick()
+    document.body.innerHTML = ''
+    process.env.NODE_ENV = ''
+    const { vm } = mountComponent()
+    await nextTick()
+    process.env.NODE_ENV = 'test'
+    const { selector } = vm
+    expect(
+      document.body.querySelector(selector)?.id === selector.slice(1)
+    ).toBeTruthy()
   })
 
   it('should not append container to the DOM root', async () => {
@@ -44,7 +60,7 @@ describe('usePopperContainer', () => {
     const { vm } = mountComponent()
     await nextTick()
     const { selector } = vm
-    expect(document.body.querySelector(selector.value)).toBeNull()
+    expect(document.body.querySelector(selector)).toBeNull()
   })
 })
 

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

@@ -37,7 +37,8 @@ export const usePopperContainer = () => {
     // for this we need to disable the caching since it's not really needed
     if (
       process.env.NODE_ENV === 'test' ||
-      (!cachedContainer && !document.body.querySelector(selector.value))
+      !cachedContainer ||
+      !document.body.querySelector(selector.value)
     ) {
       cachedContainer = createContainer(id.value)
     }