Style props are incompatible with SVG components

[ryans-usafacts]

Describe the bug

Summary:

Passing style props to any component wraps the element in a <div>, which breaks the SVG spec for anything rendered inside an <svg>.

Details:

If I want to create a Svelte component that renders an SVG element with custom style props:

// Circle.svelte
<script>
	// wants to accept --circle-fill as a style prop
</script>

<circle cx=150 cy=150 r=50 />

<style>
	circle {
		fill: var(--circle-fill, red);
	}
</style>

When passing the style props to the component:

<svg viewbox='0 0 300 300'>
	<Circle --circle-fill="blue" />
</svg>

Svelte wraps the element in a <div>, which breaks the SVG rendering because SVG's cannot contain <div> elements.

<div style="display: contents; --circle-fill:blue;">
	<circle cx="150" cy="150" r="50" class="svelte-17tvy5e" />
</div>

Given that the options for passing styles to sub-components in Svelte are already limited, and the fact that Svelte is used extensively in data visualization, I would expect that passing style props should be possible for SVG elements.

Reproduction

https://svelte.dev/repl/b7a3f94255914044b35462234ccaea43?version=3.49.0

Logs

No response

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 93.83 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Safari: 15.5

Severity

annoyance

[Prinzhorn]

Interesting enough the RFC discussion doesn't have any "svg" in it sveltejs/rfcs#13 but the final RFC does indeed say this

🐃 It would be possible for someone to accidentally target the <div>, so it may be preferable to use a made-up element name instead (<styles>?). In SVG, there might not be any choice but to use a <g>. In 99.9% of cases it wouldn't matter in the least, but it would need to be documented.

So the second half about SVG is neither documented nor implemented.

[ryans-usafacts]

Thanks for the fix @tanhauhau and @baseballyama!

[Conduitry]

This should be fixed now in 3.51.0 - https://svelte.dev/repl/b7a3f94255914044b35462234ccaea43?version=3.51.0