search

EranGrin / vue-web-component-wrapper

vue3 - web component wrapper plugin
https://erangrin.github.io/vue-web-component-wrapper/
50 stars 5 forks source link

Remove style on unmount breaks transitions #11

Closed dgoemans closed 7 months ago

dgoemans commented 8 months ago

Firstly, big thanks for this little library! We're busy migrating our relatively large web component from Vue2 to Vue3, and this has been a life saver!!

One issue that I've noticed is that we make heavy use of transitions between components, and while the styling fixes you've done work great for rendering mounted components, they fail when a component transitions out. After a bunch of investigation, it turns out that Vue calls unmounted when the leave transition starts. Furthermore, it's actually OK to leave the styles in the dom after mount, since they are both component scoped with some component specific hash, and are removed when the component is removed from the dom.

I'd like to propose removing the content of the unmounted mixin here: https://github.com/EranGrin/vue-web-component-wrapper/blob/c62df5de07fad8ff842b28146986219279d644dd/package/src/web-component-util.js#L49

I've done this locally, and it's working great! Some screenshots below to explain the problem and the style scoping in Vue. Happy to submit a pull request if that makes life easier, but I figured I'd open an issue first as it's an odd change request (removing functionality that probably had a reason to make my case work better).

Scoped Style in the dom: image

Before: vue3-upgrade-animation-before

After: vue3-upgrade-animation

Note that i'm aware that the animation is in the wrong direction, the upgrade is a work in progress 🙂

EranGrin commented 8 months ago

Hi @dgoemans, sure I'll have a look in the coming days. It looks like an interesting use case & issue

EranGrin commented 7 months ago

Hi @dgoemans, we had Covid in the family and I could finally take a moment to review your issue, firstly, thank you for taking the time to write such a detailed issue description. Now... with the regards to your issue, I can see that this part of code was contribution from @mrcego and removing this content of the event hook might lead to another issue in another use case (which I cannot think of right now), therefore you are very welcome to open a PR of changes along these lines: pass an argument to the createWebComponent that disabled the style remove from the unmounted

Thanks

dgoemans commented 7 months ago

Sorry to hear about Covid! Hope everyone is doing better now 🙂 Pull request up. Worth noting that our modified version has already been rolled into production, and no issues have been noted (and our tests are passing). We ended up refactoring your library and including it in our codebase, mostly to simplify the entry point - as we can pull in the required deps directly from Vue in our case. Still, left a reference to the original repo, and happy to contribute! If this saves someone else the pain it saved us, it's worth it!

EranGrin commented 7 months ago

Thanks for the PR, new version is up https://www.npmjs.com/package/vue-web-component-wrapper