Description
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.5Severity
annoyance