I can't migrate my component to Svelte 5

[Enes5519]

The svelte 4 component I will share below is the wrapper version of a custom element from a different library on the Svelte side. The code below was working perfectly with the use of slots, but now I cannot achieve the same perfection because the slot rules are very strict. At the first stage, I was going to update it only by upgrading the version, can you help me at this stage?

<script lang="ts">
  import type { BlDialog } from "@trendyol/baklava";
  import { onDestroy } from "svelte";

  interface $$Props extends Partial<BlDialog> {
    class?: string;
    "data-testid"?: string;
    fullWidthAction?: boolean;
  }

  export let open = false;
  export let fullWidthAction = false;

  function handleDialogOpen() {
    open = true;
  }

  function handleDialogClose() {
    open = false;
  }

  onDestroy(() => {
    // @see https://github.com/Trendyol/baklava/issues/778
    document.body.style.overflow = "auto";
  });
</script>

<bl-dialog
  on:bl-dialog-open={handleDialogOpen}
  on:bl-dialog-open
  on:bl-dialog-close={handleDialogClose}
  on:bl-dialog-close
  on:bl-dialog-request-close
  class:full={fullWidthAction}
  {open}
  polyfilled={true}
  {...$$restProps}
>
  <slot />
  <slot name="primary-action" slot="primary-action" />
  <slot name="secondary-action" slot="secondary-action" />
  <slot name="tertiary-action" slot="tertiary-action" />
</bl-dialog>

<style>
  .full bl-button {
    --bl-button-display: block;
    flex: 1;
  }
</style>

Normally I translated it as below, but do I need to create a separate prop for each component to pass the slot attribute? For example, I made the bl-button custom element a component and I cannot use them under each other.

<script lang="ts">
  import type { BlDialog } from "@trendyol/baklava";
  import { onDestroy, type Snippet } from "svelte";

  interface Props extends Omit<Partial<BlDialog>, "children"> {
    "data-testid"?: string;
    fullWidthAction?: boolean;
    children?: Snippet;
    onOpen?: (e: CustomEvent<{ isOpen: boolean }>) => void;
    onClose?: (e: CustomEvent<{ isOpen: boolean }>) => void;
    onRequestClose?: (
      e: CustomEvent<{
        source: "close-button" | "keyboard" | "backdrop";
      }>
    ) => void;
  }

  let {
    open = $bindable(false),
    fullWidthAction = false,
    children,
    onOpen,
    onClose,
    onRequestClose,
    ...rest
  }: Props = $props();

  function handleDialogOpen(e: CustomEvent<{ isOpen: boolean }>) {
    open = true;
    onOpen?.(e);
  }

  function handleDialogClose(e: CustomEvent<{ isOpen: boolean }>) {
    open = false;
    onClose?.(e);
  }

  onDestroy(() => {
    // @see https://github.com/Trendyol/baklava/issues/778
    document.body.style.overflow = "auto";
  });
</script>

<bl-dialog
  onbl-dialog-open={handleDialogOpen}
  onbl-dialog-close={handleDialogClose}
  onbl-dialog-request-close={onRequestClose}
  class:full={fullWidthAction}
  {open}
  polyfilled={true}
  {...rest}
>
  {@render children?.()}
</bl-dialog>

<style>
  .full bl-button {
    --bl-button-display: block;
    flex: 1;
  }
</style>

Problematic usage

<DialogV5 bind:open {onRequestClose} {...rest}>
  <div class="container">
    <AssetImage name="{variant}-illustration.svg" alt={variant} />
    <div class="caption">{caption}</div>
    <div class="description">
      {@render children?.()}
    </div>
  </div>

  {#if primaryButtonText}
    <Button slot="primary-action" class="button" size="large" onClick={onClickPrimary}>
      {primaryButtonText}
    </Button>
  {/if}
  {#if secondaryButtonText}
    <Button slot="secondary-action" class="button" size="large" variant="secondary" onClick={onClickSecondary}>
      {secondaryButtonText}
    </Button>
  {/if}
</DialogV5>

[brunnerh]

If you want to set slots conditionally, that should have been an issue before as well, the {#if} causes the code to be part of the default slot instead of the name slot.
With snippets, you could create them outside the component and pass them conditionally as property.

{#snippet primaryAction()}
    <Button class="button" size="large" onClick={onClickPrimary}>
      {primaryButtonText}
    </Button>
{/snippet}

<DialogV5
  primary-action={primaryButtonText ? primaryAction : undefined}
  ...

[Enes5519]

I have had this issue using the same component in the same way, otherwise why would I change it?

[brunnerh]

What issue exactly? Can you provide a complete reproduction and/or errors you encounter?

If the slot code does not work as is, there might be an issue in Svelte. Note that you cannot arbitrarily mix slots with @render/#snippet, this is probably even more so the case for custom elements.

[Enes5519]

Svelte 5: https://svelte.dev/playground/ba1339afc9de4153830adc265577beed?version=5.19.3
Svelte 4: https://stackblitz.com/edit/vitejs-vite-14xjkdws?file=src%2Flib%2FDialog.svelte

[brunnerh]

This looks like a false positive to me.

Element with a slot='...' attribute must be a child of a component or a descendant of a custom element

The element is a descendant of a custom element, but the compiler cannot know this. That being the case, the error is probably too zealous. (Though I am a bit surprised v4 does not complain at all.)

By the way, you can also create v4 examples in the playground by changing the version in the query string.

[Enes5519]

This situation blocks me directly and does not allow me to pass the slot prop in any other way. Should I open an issue about this?

[Enes5519]

I created a workaround. I create a prop called slott and set it with the actions. But I didn't like this solution very much, I'm moving this discussion to an issue.