MutationObserver in defineCustomElement is disconnected if we move the custom element to another place, then lose attribute observation

[lejunyang]

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNp9VE1v2zAM/SucMcAO4DnrtpOXZu2KHrpDNmy71T24sZKotSVBktMWgf/7KDL+6Fo0l4jke0/8sg7RuTHZvhVRHi3c2krjwQnfmmWhZGO09XAAKzYpVGIjlbhondfNZS0aoXwKO+hgY3UDMUrEXwtVqLVWzgPjrpRpPZy+xk0OhQIwVhuXw3W8L2sUuEmDUzTSk7M1Vel7L2WVECHFnAIIuhmQDGCKvrUKkhmcLmGXxDLcHCOQwwD+yYgcYtU2t8LGpBh+dG/OeWRkDCGtKP0cEkGqgxQA14haWJvIfGm3wjP73K3oBmzFFKxrkdV6m4T7oc8Nz7MJLlSU9DWnwDqZdKtylQQofENGXUNOxJ7X8aEjBxpdkJQbSN6tp+12GaaYxM3TB759Rvj/IDymCSqdzjEI9+Pl0nEvkpNPwc9eIh39M9wYue+NAWJFo/fi3HuLIZ4W9ZWo3MJsxMjb1mM+vBxBBAtknYB4roC3HfmlMUJVyUTyGZU7HMjvxR7rHiWwKsZjkGPYEl/K+vrjDQ3q2SiHSQ20lLZMb0bP8eLFnD8t/KjQ8KIxNVLRAlj0zYacGKdFhOwigjPWR5sP6MJWoklotObMxxZ5reBsXcv1PYZDZ4poGf4Wcw4uX4DGFiN0NAYCKe9OlocDjbrrFnO0yBumyongCdm8f5VwnsJz9B4Ts32KwUU309iwSzuhkFELHAOewT9oHN8Wv3rcA16FFB4k7jruYwUfB+9EPRy0hRey7BhLSvkThzKsnHTHSJUCVnpcWPQq3e9F1d+xmE/mFKWRdzj9jdxmd04rfC1pY4porRsja2F/Gi9xO4oo7x+KIirrWj/8IJ+3w8uCnJ1Y37/iv3OPwVdEv6xwwoY5DjF+ZDh8+WclHvE8BBtdtTWi3wj+Fri5bciRYd9bVWHaExxle0VvvlTbv+7y0Qvl+qJCovTEEL6I8L2/eKP0Md3P2Zf+aYq6f3m0JpY=

Steps to reproduce

• click move button, then delete the two digits in input, will find 0 in input
• or click move, then click removeAttr, value attr of custom-element is removed, but inner input is not updated

What is expected?

MutationObserver in custom element should work after we move the element, then the prop can be updated normally

What is actually happening?

MutationObserver is disconnected if we move the DOM.
For the first situation, we delete the two digits, the num will be null, but patchDOMProp(rumtime-dom) will make it 0 and remove the value attribute. If MutationObserver is still on, inner value will be null as the attribute is removed. But it's off so we get 0

System Info

No response

Any additional comments?

I am doing some work with documentPictureInPicture, which can open a new small top-level window to display any elements. So I have to move the elements from original document to the new document, then the issue occurs.

I think we can put the clear logic of MutationObserver in next tick of disconnectedCallback of apiCustomElement(@vue/runtime-dom), then it will work

  disconnectedCallback() {
    this._connected = false
-    if (this._ob) {
-      this._ob.disconnect()
-      this._ob = null
-    }
    nextTick(() => {
      if (!this._connected) {
+      if (this._ob) {
+        this._ob.disconnect()
+        this._ob = null
+      }
        render(null, this.shadowRoot!)
        this._instance = null
      }
    })
  }