Skip to content

Fix slot prop diagnostics inside Svelte 5 snippets#3030

Merged
dummdidumm merged 4 commits into
sveltejs:masterfrom
Abdulmumin1:fix-svelte5-snippet-slot-prop
May 22, 2026
Merged

Fix slot prop diagnostics inside Svelte 5 snippets#3030
dummdidumm merged 4 commits into
sveltejs:masterfrom
Abdulmumin1:fix-svelte5-snippet-slot-prop

Conversation

@Abdulmumin1

@Abdulmumin1 Abdulmumin1 commented May 22, 2026

Copy link
Copy Markdown
Contributor

Fixes #2992.

slot="..." on a component directly inside a Svelte 5 snippet was being treated as legacy Svelte slot placement. That made the generated code read $$slot_def from the child component, which breaks for Svelte 5 wrapper components whose generated props include Record<string, unknown>.

In this case, the snippet itself is already the slot API:

<Button>
	{#snippet badge()}
		<ButtonBadge slot="badge" />
	{/snippet}
</Button>

Here slot="badge" should remain a normal prop/attribute on ButtonBadge, so wrappers can forward it to a web component.

This breaks the virtual element/component parent chain at the snippet boundary. Nested components inside the snippet still keep their own parent chain, so this continues to work as a Svelte slot:

{#snippet badge()}
	<X>
		<Y slot="foo" />
	</X>
{/snippet}

Tested with the repro from #2992:

node packages/svelte-check/bin/svelte-check --tsconfig ./tsconfig.json
svelte-check found 0 errors and 0 warnings

Also ran:

pnpm --filter svelte2tsx test
pnpm --filter svelte-check build

I also temporarily ran svelte2tsx tests with svelte@5.54.0 locally:

804 passing

@changeset-bot

changeset-bot Bot commented May 22, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 855319b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
svelte-check Patch
svelte2tsx Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@Abdulmumin1 Abdulmumin1 marked this pull request as ready for review May 22, 2026 11:11

@dummdidumm dummdidumm left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! This isn't quite right yet - if you have this inside a snippet

{#snippet asd()}
<X>
  <Y slot="foo" />
</X>
{/snippet}

then it also counts as a slot. So we gotta reset the depth in that case.

We don't need this to be an integer btw, I think it's enough to say "you are inside a snippet". I also do wonder if the better change is to break the parent chain for elements/components. That change would be in htmllxtojsx_v2

@Abdulmumin1 Abdulmumin1 force-pushed the fix-svelte5-snippet-slot-prop branch from 8bc1f75 to d94770a Compare May 22, 2026 15:27
@Abdulmumin1 Abdulmumin1 force-pushed the fix-svelte5-snippet-slot-prop branch from 7ac5fc9 to 887e9e7 Compare May 22, 2026 15:37
@Abdulmumin1

Copy link
Copy Markdown
Contributor Author

Thank you! This isn't quite right yet - if you have this inside a snippet

{#snippet asd()}
<X>
  <Y slot="foo" />
</X>
{/snippet}

then it also counts as a slot. So we gotta reset the depth in that case.

We don't need this to be an integer btw, I think it's enough to say "you are inside a snippet". I also do wonder if the better change is to break the parent chain for elements/components. That change would be in htmllxtojsx_v2

that makes sense. I updated to the pr accordingly

so the direct child case from the issue stays a normal prop:

<Button>
	{#snippet badge()}
		<ButtonBadge slot="badge" />
	{/snippet}
</Button>

but nested component slot placement inside the snippet still works:

{#snippet asd()}
	<X>
		<Y slot="foo" />
	</X>
{/snippet}

@dummdidumm dummdidumm left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you!

@dummdidumm dummdidumm merged commit 86fafb1 into sveltejs:master May 22, 2026
@github-actions github-actions Bot mentioned this pull request May 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

"slot" HTML attribute on Svelte 5 component wrappers triggers type error

2 participants