core icon indicating copy to clipboard operation
core copied to clipboard

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

Open lejunyang opened this issue 1 year ago • 4 comments

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 image

  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 avatar Nov 16 '24 09:11 lejunyang