Unable to clear html elements from dom nodes.

[SheryarGorelo]

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNqVVNtu2zAM/RXWL0mAxcawPWVOsLbosA27YS22F70oNhOrkSVDkt0MRf59lGTn0nYthlwsiUfkIXno++S8adKuxWSW5LYwonELpkTdaOPg3uBqByuja2AJYVjybm+7rIQsB1uaha33wxKmCq2sg9quYQ7kYjz6iFJq+K2NLM9GE6Y6bsBW+q63r7i0OCHfTOE2eC9xxVtJDJgCsOjaBsaTuAO64lqjhh2Aw62bxUCjyavh1PuPp860SEH94c4/doQpNKWhUDk7C35GIYHRLDzI7jE1ukqXPcDp9VrieNJHdZWwaZ/C2X5DKYQY9O3/Dp8825eXNg7rRnKHtAPIS9GFBS2XrXNawftCimIzZ0mMy5LFTVjAB4GytHkWcfG65EuU0E3Fii54HgT/Es5e51kwRlzsWTdFKvcijz0LFvrlWSSRZ0fUmEpeJc5SP1dind5arUgmoQIs8RUUEs33xgnqN0tmQ0dYwqndd5/DmS9+3xO6U2GxeeL81m79GUt+GLRoOsp3b3PcrNFF89X1N+r1kbHWZeur84zxJ1otW88xwi5aVRLtI1xg+ynIWqj1jb3aOlR2SOqEaKWFddeOO1F4WxDuIClvpwG4fKYuh1zepG8HrVCJ99NzMoX/PQsPNH6i4IMoXxai/wQxnk2ncM0JgIASaxoXuKtEUQFlYYmY49TREqbTeNvDHwl4PJkv7v0bQUtMpV6PRw6tG012JNLe90W80vs7iDs6PuJydUKCGwSlnSfjG/eIz8BIqKZ1NLJ/GpxT8K0bgSXkZhpGgyhSQ4sNhIlhCVA5Cqy0LNGQ7bwsweoaw1smTVMCQNYzCyEsVaZwoHiNBC+4oZaDKPfrHkdIHRQBHZeth3Zadprsv/wzz6L1n2jL+TJUjC9fxNZoCizRB//aL1+8w9tSEP6cHg+wpJeQYuzxU6+JZPcXKxMUCg==

Steps to reproduce

1. Create a child component containing the element
2. Have this component toggle on v-if / v-else so the component gets destroyed
3. Toggle the component such that it is no more present in the view.

What is expected?

The element nodes should be cleared from detached elements.

What is actually happening?

The elements are not being cleaned up.

System Info

No response

Any additional comments?

I have added the code for html button, input and select.
In the case of button the detach elements gets cleared and for input and select it holds the nodes.
using Microsoft (dev) for the detach element feature.

[edison1105]

duplicate of #5256
a workaround #5256 (comment)
fixed via #11067 and will out in v3.5

[SheryarGorelo]

@edison1105
I am already using hoistStatic as false. I have also updated the compilerOptions in reproducible link, its still not releasing the nodes.

[waleedhasank]

@edison1105, I am also facing this same issue in my new Vue 3 app. I was using Vue 3 with Quasar first, then I realized that some UI components were staying in DOM even after leaving the component (verified through the detached elements feature of Microsoft Edge DEV channel browser). I removed Quasar and used simple HTML elements, but they are holding up DOM nodes as well.

My vite config already has that line for hoistStatic set to false. I have also attempted to use the [email protected] but I still have the same issue. My issue is the exact same as the one mentioned here.

I also can't blame the detached elements feature of Microsoft Edge, because I can see the DOM nodes in chrome's performance monitor tool as well.

[edison1105]

@waleedhasank @SheryarGorelo

• disable the vue-devtools
• or test it in production mode.
  

[SheryarGorelo]

@edison1105, I ran it using the following commands:
npm run build
npm run preview

The initial dom nodes were 311 and after toggle they were around 333, we can still see its not being detached. or am I doing something wrong here? attached video demo

https://www.loom.com/share/9e934ba9f4654ab8b7e879ba00f16ded?sid=87b17a94-1551-442c-af86-23a040330219