svelte
svelte copied to clipboard
Transitions in custom Elements
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 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 https://github.com/sveltejs/svelte/pull/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!