Svelte: 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