--style-props on SVG components don’t work when passed as slot content

[sophiamersmann]

Describe the bug

When a SVG component is passed as slot content, then --style-props wraps the markup in a <div />, not a <g />, which breaks the SVG.

For example, say I have a <Circle /> component that renders a <circle />, then this works:

<svg width=50 height=50>
	<Circle --fill="orange" />
</svg>

But when I have a <Svg /> component with a slot, and pass <Circle /> as slot content:

<Svg>
	<Circle --fill="orange" />
</Svg>

then <circle /> is wrapped in a <div />, not a <g />, which breaks the SVG.

Reproduction

REPL: https://svelte.dev/repl/936c0e4352e249f69747c6635d8b58c0?version=3.51.0

Logs

No response

System Info

See REPL

Severity

annoyance

[msf-caesar]

In order for it to work you must follow the hierarchy, first its <svg> then its <circle>.

[dummdidumm]

Fixed in Svelte 5