fix(custom-element): fix parent, observer and exposed issues when remove element and append it back immediately or after fully unmounted

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -145,6 +145,54 @@ describe('defineCustomElement', () => {
       expect(e._instance).toBeTruthy()
       expect(e.shadowRoot!.innerHTML).toBe('<div>hello</div>')
     })
+
+    // #12412
+    const ContextEl = defineCustomElement({
+      props: {
+        msg: String,
+      },
+      setup(props, { expose }) {
+        expose({
+          text: () => props.msg,
+        })
+        provide('context', props)
+        const context = inject('context', {}) as typeof props
+        return () => context.msg || props.msg
+      },
+    })
+    customElements.define('my-context-el', ContextEl)
+    test('remove element with child custom element and wait fully disconnected then append and change attribute', async () => {
+      container.innerHTML = `<div><my-context-el msg="msg1"><my-context-el></my-context-el></my-context-el></div>`
+      const parent = container.children[0].children[0] as VueElement & {
+        text: () => string
+      }
+      const child = parent.children[0] as VueElement
+      parent.remove()
+      await nextTick()
+      await nextTick() // wait two ticks for disconnect
+      expect('text' in parent).toBe(false)
+      container.appendChild(parent) // should not throw Error
+      await nextTick()
+      expect(parent.text()).toBe('msg1')
+      expect(parent.shadowRoot!.textContent).toBe('msg1')
+      expect(child.shadowRoot!.textContent).toBe('msg1')
+      parent.setAttribute('msg', 'msg2')
+      await nextTick()
+      expect(parent.shadowRoot!.textContent).toBe('msg2')
+      await nextTick()
+      expect(child.shadowRoot!.textContent).toBe('msg2')
+    })
+
+    test('move element to change parent and context', async () => {
+      container.innerHTML = `<my-context-el msg="msg1"></my-context-el><my-context-el msg="msg2"></my-context-el>`
+      const first = container.children[0] as VueElement,
+        second = container.children[1] as VueElement
+      await nextTick()
+      expect(second.shadowRoot!.textContent).toBe('msg2')
+      first.append(second)
+      await nextTick()
+      expect(second.shadowRoot!.textContent).toBe('msg1')
+    })
   })
 
   describe('props', () => {

packages/runtime-dom/src/apiCustomElement.ts

@@ -286,16 +286,20 @@ export class VueElement
     this._connected = true
 
     // locate nearest Vue custom element parent for provide/inject
-    let parent: Node | null = this
+    let parent: Node | null = this,
+      parentChanged = false
     while (
       (parent = parent && (parent.parentNode || (parent as ShadowRoot).host))
     ) {
       if (parent instanceof VueElement) {
+        parentChanged = parent !== this._parent
         this._parent = parent
         break
       }
     }
 
+    // unmount if parent changed and previously mounted, should keep parent
+    if (this._instance && parentChanged) this._unmount(true)
     if (!this._instance) {
       if (this._resolved) {
         this._setParent()
@@ -320,18 +324,31 @@ export class VueElement
     }
   }
 
+  private _unmount(keepParent?: boolean) {
+    if (this._ob) {
+      this._ob.disconnect()
+      this._ob = null
+    }
+    this._app && this._app.unmount()
+    if (this._instance) {
+      const exposed = this._instance.exposed
+      if (exposed) {
+        for (const key in exposed) {
+          delete this[key as keyof this]
+        }
+      }
+      this._instance.ce = undefined
+    }
+    this._app = this._instance = null
+    if (!keepParent) this._parent = undefined
+    this._resolved = false
+  }
+
   disconnectedCallback(): void {
     this._connected = false
     nextTick(() => {
       if (!this._connected) {
-        if (this._ob) {
-          this._ob.disconnect()
-          this._ob = null
-        }
-        // unmount
-        this._app && this._app.unmount()
-        if (this._instance) this._instance.ce = undefined
-        this._app = this._instance = null
+        this._unmount()
       }
     })
   }
@@ -430,11 +447,14 @@ export class VueElement
       if (!hasOwn(this, key)) {
         // exposed properties are readonly
         Object.defineProperty(this, key, {
+          configurable: true, // should be configurable to allow deleting when disconnected
           // unwrap ref to be consistent with public instance behavior
           get: () => unref(exposed[key]),
         })
-      } else if (__DEV__) {
-        warn(`Exposed property "${key}" already exists on custom element.`)
+      } else {
+        delete exposed[key] // delete it from exposed in case of deleting wrong exposed key when disconnected
+        if (__DEV__)
+          warn(`Exposed property "${key}" already exists on custom element.`)
       }
     }
   }

packages/vue/__tests__/e2e/ssr-custom-element.spec.ts

@@ -100,7 +100,6 @@ test('work with Teleport (shadowRoot: false)', async () => {
       },
       { shadowRoot: false },
     )
-    customElements.define('my-y', Y)
     const P = defineSSRCustomElement(
       {
         render() {
@@ -110,6 +109,7 @@ test('work with Teleport (shadowRoot: false)', async () => {
       { shadowRoot: false },
     )
     customElements.define('my-p', P)
+    customElements.define('my-y', Y)
   })
 
   function getInnerHTML() {