[BUG] - Multiple CE instances style breaking when 1st CE removed from the DOM

[OBe95]

Describe the bug

Removing the 1st CE instance of a v-for, leads to style being completely removed from the DOM even though there are still other CEs relying on it

Reproduction

https://play.vuejs.org/#eNqNVE1v2zAM/SucdsgGtBGw3gLX2Nb10B22oguwQ92D5zCJWscyJDlLEPi/j5ItRc6cbgWK2HyPfPwyD+xTXU+3DbIZSwxu6jI3mGYV0F+y/pA+YK3koimMkBVog7VOOJl7QlP2T+6tFOmNrPdg1giFrAxWBuQS5mv8iWUhN2h1rMWshQZS2q+UbKpFwslzGOc+Jy0QBkTlwiUitXxe4GVe11yrglPAWlakoflQIeEijUIm3GWZ8Kg6dsGMphSXYjV91rKi4g+WnTEbVZSovte2Yp2xGTjEYnlZyt9fnc2oBi+8vVhj8TJif9Y7a8vYvUKNaosZC5jJ1QpNB9/++IY7eg7ghjpeEvsV8AG1LBubY0f7TH2ktCOey/aOeqSMqFZzfbujgWhflE3UMlvHzxj17eaV0o/pXk2vnF9WtdTFYeftDulCidqARtPUaaaySrgU4AAKc1qjLUILSyU3MCGPScToA93RnHrClEc2KxDTv8ii2dD4c5vtHQ0zOAl60dyaBpzTAHMpS+rMGdcePXW6LaTe025uzrgFPDjafwvTLpNZwzU8WhNQc90PgPWe/V3PhcfXmC8olRlMBpxJIPQf2ymhs3saTXpMNurCiGCPjkn1ENx0ln/IDPo2IhTwMakAjos9Ddu8ENreClxQq/3OvTsM+9t/qb56/xqEOgO0723YhHdL7dbZGY6nxKWRLMQWtpdLqa4zZqdsz5abdsZg9oL73jzt681Y70iu8dZvL8WSqKGAx9jpKfIiP58CvLUNjhDCwmmEmdBe29IoHR4HiW7iWOReOT0cXDU+E2jbUU9P87e/bUOV8Yd8rP1XYwyt6ceiFMXL+cJpjm/+pydzuVrR2QyaXXg/I05Dcs8nubP2D1s3Y48=

System Info

No response

Used Package Manager

npm

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a unplugin-vue-ce issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs instead.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[OBe95]

This seems to be linked to the optimisation done in this PR to avoid appending the same style multiple time

[baiwusanyu-c]

Hello, based on the information you provided to reproduce the problem, I am unable to further troubleshoot the problem. The reasons are as follows.

1. I don’t know the code content of WelcomeItem.vue, I can only judge that it contains three slots
2. I can’t determine the code content of DocumentationIcon.vue, ToolingIcon.vue, and EcosystemIcon.vue, nor do I know what styles they contain. This prevents me from accurately reproducing the problem using TheWelcome.vue It is also worth mentioning that the code in unplugin-vue-ce currently lags behind the content of 7942, so your PR content may not be available. Are you sure there is still a problem in 7942?

[baiwusanyu-c]

I need you to provide more information to locate the problem, which at least includes the smallest relevant component code content and interactive steps that can reproduce the problem. With this information, I can determine whether there is this problem in the latest code of 7492 (I am going to add the latest content to unplugin-vue-ce)

[OBe95]

@baiwusanyu-c here is a reproduction env, you can toggle the first child and see the impact on the others

The issue comes from the fact that the optimisation of avoiding adding multiple times the same style attaches the style-content to the 1st rendered element (without keeping track of how many elements uses the same style) and when unmounting that element it removes the style (the PR suggestion adds the count tracking to avoid deleting the styles unless there are no other elements depending on it)

I am not sure what you're referring to with 7492

[baiwusanyu-c]

7492 refers to https://github.com/vuejs/core/pull/7942 The latest code in this PR will no longer delete styles except in hot updates.

[OBe95]

Then I assume it will still happen in dev mode (didn't check yet) Out of curiosity why you no longer consider deleting styles ?

[baiwusanyu-c]

The design that does not delete style is discussed with a member of the VUE team, because we noticed that the existing implementation of ordinary components will not delete the style