Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte 5: SVG elements within <slot> fallback not displayed #11847

Closed
techniq opened this issue May 31, 2024 · 0 comments · Fixed by #11849
Closed

Svelte 5: SVG elements within <slot> fallback not displayed #11847

techniq opened this issue May 31, 2024 · 0 comments · Fixed by #11849

Comments

@techniq
Copy link

techniq commented May 31, 2024

Describe the bug

If an SVG element (ex. <circle>) is placed within a <slot> as the fallback, the element is not visible, even though the markup is correct.

<slot>
  <circle cx={10} cy={10} r={5} />
  <circle cx={20} cy={20} r={5} />
  <circle cx={30} cy={30} r={5} />
  <circle cx={40} cy={40} r={5} />
  <circle cx={50} cy={50} r={5} />
</slot>

Removing the <slot> wrapper or adding <svelte:options namespace="svg" /> at the top of the component works around the issue.

This is likely due to the element being created with document.createElement("circle") instead of
document.createElementNS("http://www.w3.org/2000/svg", "circle");.

Related issue: #11219

Reproduction

Logs

No response

System Info

Svelte 5 REPL

Severity

blocking an upgrade

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 a pull request may close this issue.

1 participant