Transitions in custom Elements

[Stormsher]

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.

[dylanblokhuis]

Still not working in sveltev3. To replicate this issue you can use this repo: https://github.com/dylanblokhuis/svelte-transition-issue

[hongmomanu]

this is a big big big bug,not only Transitions but also not work

[armanozak]

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. 🤷‍♂️

[MonkeyAndres]

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

[akauppi]

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)   // 👍🥴
    }

[Auroratide]

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!