Transitions in custom Elements
Stormsher opened this issue ยท 6 comments
Seems like there is a problem with svelte-transitions in customElements, js works properly, adding css: animation, right before destroy, but there are no visual effects...
Seems like it can`t set animation for Shadow CSS.
Still not working in sveltev3.
To replicate this issue you can use this repo: https://github.com/dylanblokhuis/svelte-transition-issue
this is a big big big bug,not only Transitions but also <style></style> not work
The reason is that the create_rule
function in the style-manager appends styles to document head and not inside the shadow root as described here.
So, line 32, which is document.head.appendChild(style);
should actually be something like closestShadowRootOrDocumentHead.appendChild(style);
.
However, currently, the function doesn't have a closestShadowRootOrDocumentHead
. It gets called after a series of other functions and passing customElement
context through those 5 or 6 other functions seems to be necessary to achieve that.
Although performance-wise not the best solution, there is a cleaner alternative:
function find_root(element) {
const parent = element.parentNode;
return parent
? parent.head
? parent.head
: find_root(parent)
: element;
}
If a function like the one above is added to the style-manager, then line 32 can be changed into this:
find_root(node).appendChild(style);
Another alternative might be replacement of line 32 at compile time by the compiler. Performance would then be OK.
An final option I could think of is doing the same replacement via a custom element transition loader for module bundlers like Rollup and Webpack, but that means additional and repetitive work for something that should already be present within the compiled output. ๐คทโโ๏ธ
As long as the PR #4998 is still open you can use the build script in the custom-elements template that I created. It fixes the transition using .getRootNode()
.
Custom element template: https://github.com/redradix/svelte-custom-element-template
Build script source: https://github.com/redradix/svelte-custom-element-template/blob/master/scripts/build.js
I spent some time today with this, and made a work-around using tick
. If anyone is interested:
https://github.com/akauppi/sv-keys/blob/master/src/tools/slideFixed.js#L32-L40
TL;DR It's a custom transition and while css:
fails quietly (as stated), tick:
does the work.
tick: t => { // jer..ky
node.style.right = f(t) // ๐๐ฅด
}
Until a PR fixing this becomes merged, I've made a tiny workaround that allows transitions to work with custom elements in at least simple cases, available here: https://github.com/Auroratide/svelte-custom-element-transitions
Sharing here in case anyone else finds it useful!