Remove vue custom element and append it back later can cause a lot of issues

[lejunyang]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqVVW1vmzAQ/is3NAkiUbLSfcrSbF0VaZv2UrX9NiaVwYXQgm3ZJk0V5b/vbENDXpZu+RDAd/fcc69eeRdCRIsGvZE3VpkshQaFuhFQpaw4TzytEm+SsLIWXGpYwRzWMJO8Bp+M/Hc9SaPwFmtRpRqvcfZXtRxnJcPLRmleTyuskekQhOSLMscQSnaPmd4yTljCMs6UhmkF54fsg1XCwGAINQL7DlCrYgQ3WpasCM3J2v7b0AKrGRIXXAquENaDzsodODzz07jUIwgGcD5x+BHhWiRCHLhnyz3wiaTR9204QrViR72VEX8XYV975cg2zIWWPyNLYitZ634e+Hm5IPWfHbkWwVCC93B3lUrKxQher3qC9R2M9piDAVMV137r6Jd9mhQZ11SsGQSvsn6KVVQgka6fTrDyBwPYETrmnTykSg2o5l3dDJ+U5PKU4t9uE5cHK/SNiTPAal9z/On229fW4STwSWXLIH7ZILYG46Frc2pq+tCtPn0BjCnBk9MILqsye4DEk1jzBRo2iQcpy0HPkUHWSoVEgXRoxSE8ol9VQFkiTUApuRwPDZ4F/t1ozRl8sLY0VWQTOfRgQPO1cTQeOtXDZptERq33gGwMQo/MNoShEEdA+ZCo5iYCEGlBk9aF0XqOQXMXSmS/SgWMa2hETtnJXwglFS2X2HDZQdznc3aMz3Mu4jbpiefg3VG4X4hsTqvKeUy1lkan1Mq+l+QaTSxOJw+BDuw8/E+A8cFaxf9cq+30bKI5DmD80r666MKg6VIFzZbP8NFsDBpeb7IT+16uaYfM+mQop0o/VUhndSqLkp1oLkYQvxFLu+fNNhjbKTYujJYqTPc7GNsfrVanNxkP3bM13v7agTI17aDofcu2K4EZ0d5YeiHdQcR/VhbRveKMLiq7nk1QtSgrlD+ELmkLJN7z8qeWqSr++MWeadlgu/hMr2D2cOD8XlH8I3q5orZEuUDqok6mKVGonXh68502a09Y87ypSPuI8BoVrxrD0al9pE1PtHt6lu1ne0PSfXWrpkuNTHVBGaKbKyzx6FK8PBL6hu5Z9Nba0Vr31n8AEZmhOg==

Steps to reproduce

1. Click "remove el1" and then click "prepend el1", we'll get an error

2. Refresh the page, click "move el2 to el1". el2 is not updated

3. Refresh the page, click "remove el2" and "append el2", and then click "change el2 attr", its attribute is changed, but prop is not updated

What is expected?

Remove custom element and append it back should work as expected

What is actually happening?

For now, Vue will unmount the custom element after next tick of disconnection. If we append fully unmounted element back to document, there can be multiple issues First, if the custom element has other custom element inside it, we'll get an error when _setParent() Also, as mutationObserver is disconnected and we don't re-create it when connect, changing element's attributes will not work. Besides, expose could not work as it refers to old data I think we should re-mount the element at that case, also we need to delete exposed data if element is fully unmounted

System Info

No response

Any additional comments?

No response

[lejunyang]

Added case 2 and updated the reproduction. Case 2 is moving an element to other element withou waiting. For now it will do nothing as disconnectedCallback and connectedCallback happen in one micro task. I suppose at this case we should unmount the element and re-mount it to update parent?

[edison1105]

I think this usage is not quite right. Vue adds many private properties to custom elements. You can't continue to use the element that has been removed from the DOM tree. because the private properties still on the element will cause some edge cases. You should add a new custom element instead.

[lejunyang]

But manual DOM manipulation should be allowed as it's a standard web feature. We're simply using native methods remove and append, not using any private properties. True we normally don't do these operations, I found these issues during writing Cypress test cases, during which I found element was removed and appended back on every test snapshot. If it's totally under Vue I agree with you, but I believe customElement feature can be used in vanilla HTML and JS, we shouldn't take what users will do for granted. I can use Vue to write custom elements and ship them to everywhere(which is I'm doing), so please consider to fix this, Thanks!