fix(runtime-dom): fix anchor loss caused by unmount

packages/runtime-core/__tests__/components/Teleport.spec.ts

@@ -553,4 +553,44 @@ describe('renderer: teleport', () => {
  `"<div>teleported</div>"`
  )
  })
+
+ // #9071
+ test('should render within the target element unique child element', async () => {
+ const root = document.createElement('div')
+
+ const show = ref(false)
+
+ const App = defineComponent({
+ setup() {
+ return () => {
+ return show.value
+ ? h(Teleport, { to: root }, h('div', 'Teleported'))
+ : h('div', 'foo')
+ }
+ }
+ })
+
+ domRender(h(App), root)
+
+ expect(root.innerHTML).toMatchInlineSnapshot('"<div>foo</div>"')
+
+ show.value = true
+ await nextTick()
+
+ expect(root.innerHTML).toMatchInlineSnapshot(
+ '"<!--teleport start--><!--teleport end--><div>Teleported</div>"'
+ )
+
+ show.value = false
+ await nextTick()
+
+ expect(root.innerHTML).toMatchInlineSnapshot('"<div>foo</div>"')
+
+ show.value = true
+ await nextTick()
+
+ expect(root.innerHTML).toMatchInlineSnapshot(
+ '"<!--teleport start--><!--teleport end--><div>Teleported</div>"'
+ )
+ })
 })

packages/runtime-dom/src/nodeOps.ts

@@ -8,7 +8,9 @@ const templateContainer = doc && /*#__PURE__*/ doc.createElement('template')
 
 export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
  insert: (child, parent, anchor) => {
- parent.insertBefore(child, anchor || null)
+ // #9071
+ anchor = anchor && anchor.parentNode === parent ? anchor : null
+ parent.insertBefore(child, anchor)
  },
 
  remove: child => {