Slotted content less reactive when referencing external slot props in event handler

[brunnerh]

Describe the bug

This is a very specific issue which only seems to happen when passing slot props into content slotted into another component, only using them in an event handler.

E.g.

<ItemDisplay content={item}>
  <svelte:fragment slot="default" let:content>
    <!-- ... -->

    <Wrapper>
      <!-- Passed value of "content" will be outdated if original source (item) changes -->
      <button type=button on:click={() => onEdit(content)}>Edit (Wrapped)</button>
    </Wrapper>

    <!-- Passed value of "content" will be up to date if original source (item) changes  -->
    <button type=button on:click={() => onEdit(content)}>Edit</button>
  </svelte:fragment>
</Table>

If the the content is additionally used in any other way, e.g. JSON stringified in the button content, the problem disappears.

Reproduction

REPL

The edit buttons are supposed to initialize an edit dialog with the current state of the item, that being whether it is checked.
So if an item is initially unchecked, the edit dialog should also have an unchecked checkbox. Is this changed and the dialog is opened again, the box should now be checked.

Concrete steps:

• Click "Edit (Wrapped)" button
• Check box in dialog, confirm with OK
• Click the same edit button again, observe checked state in dialog
• (Clicking the non-wrapped edit button should show the dialog in the correct state)

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    Memory: 13.37 GB / 31.92 GB
  Binaries:
    Node: 16.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 100.0.4896.75
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.36)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    svelte: ^3.46.4 => 3.47.0
    webpack: ^5.70.0 => 5.70.0

Severity

annoyance

[mdynnl]

You can workaround this by

1. Subscribing to content inside the nested slot including reactive event handlers i.e on:click={(content, () => {})}.
   https://svelte.dev/repl/d4666b62f77640d1ad3c1a6a54bc647a?version=3.47.0

2. Spreading $$props or $$restProps in parent slot (these are not recommended for perf reasons)
   https://svelte.dev/repl/b41c38532d2c46d9a8d81c732c4e551b?version=3.47.0

Edit: I think svelte should dirty check by default if a slot's let bindings are referenced by inner slots' function scopes, e.g. event handlers. This would lead to more correct code(IINW) and better compiler output than above approaches.

[brandonmcconnell]

Hi @brunnerh. I'm noticing a couple of things here (and I'm rather new to Svelte, so forgive me if some of my comments are in error).

• Shouldn't your svelte-fragment be svelte:fragment. Otherwise, as you can see by inspecting your REPL, the svelte-fragment custom element is actually rendered to the DOM.

• The content slot-prop you created is on ItemDisplay, not the fragment, yet you are using the let: directive on your fragment instead of the ItemDisplay component instance. Instead, I believe this should be added to the ItemDisplay allowing you to forego your use of a fragment altogether.

  Here is how that would look:

  BEFORE (REPL)

  <ItemDisplay content={item}>
      <svelte-fragment slot="default" let:content>
          <input type=checkbox disabled checked={content.isChecked} />
          <Wrapper>
              <button type=button on:click={() => onEdit(content)}>Edit (Wrapped)</button>
          </Wrapper>
          <button type=button on:click={() => onEdit(content)}>Edit</button>
      </svelte-fragment>
  </ItemDisplay>

  AFTER (REPL)

  <ItemDisplay content={item} let:content>
      <input type=checkbox disabled checked={content.isChecked} />
      <Wrapper>
          <button type=button on:click={() => onEdit(content)}>Edit (Wrapped)</button>
      </Wrapper>
      <button type=button on:click={() => onEdit(content)}>Edit</button>
  </ItemDisplay>

[brunnerh]

@brandonmcconnell The svelte-fragment was an error. It does not affect the bug, but it might be confusing, so I fixed it accordingly.

I know the slot props can be declared on the component, but slot props may not necessarily be available on every slot and the component already has a property called content. Separating it like this makes the scope a bit more explicit, but this is up to personal preference.

[Conduitry]

This should be fixed in 3.48.0 - https://svelte.dev/repl/6e71c6198e044697b577f36a29a0c507?version=3.48.0

[brandonmcconnell]

Thanks, @Conduitry. Another issue was recently opened which may be related, where slot prop contents returned by the default slot renders as undefined when passed into named slots:

• Undefined values when using a let binding from the default slot inside a named slot. #7497

Not sure if that should be working or not, but currently Svelte allows passing props into technically-neighboring slots without throwing any errors, but the value passed is undefined.

2 REPL examples of this behavior:

• The provided REPL in the aforementioned issue was this:
  https://svelte.dev/repl/a9bb52762959444da8da018ab04f6c7b?version=3.48.0
• My personal use-case where I saw this same behavior can be seen in this REPL, which demonstrates the same behavior when nesting slots within an if-statement to make them dynamic:
  https://svelte.dev/repl/c5ff76dbf4ab40e18cd267d2119b24dd?version=3.48.0