SVG elements in <slot> not rendered as SVG elements

[rikschennink]

Describe the bug
I have a component that is basically an <svg> with a <slot> the idea being that it's easy to pass some svg tags to the component and have them all rendered the same. This works fine as long as the SVG is passed as an HTML string. {@html '<rect x=0 y=0 width=20 height=20/>'} but if it's passed as an element, it no longer works.

This doesn't work:

<Icon>
    <rect x=0 y=0 width=20 height=20/>
</Icon>

This does work:

<Icon>
    {@html '<rect x=0 y=0 width=20 height=20/>'}
</Icon>

To Reproduce

Icon component

<svg {width} {height} viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round" stroke-width={strokeWidth} {stroke} {fill}>
    <slot></slot>
</svg>

Expected behavior
SVG elements should be rendered as SVG.

Information about your Svelte project:

• Tested on Chrome 76
• MacOS Mojave
• Svelte version 3.6.10
• Rollup

Severity
Annoying, results in less readable code. Also, I wonder if this impacts the binary size in any way.

I suspect this issue is related, but was closed.
#2557

[davebrent]

I am experiencing similar behavior. I think it may simply be a case of including all the other svg elements in this check here. At least, quickly changing it seemed to work for me.

[shaltaev]

I try to repro: https://svelte.dev/repl/ace7458e21a448809b2cf0a0048b4b7f?version=3.8.0

It's look like problem was gone for now ( svelte 3.8.0 )

[rikschennink]

@shaltaev will test later today.

[davebrent]

I try to repro: https://svelte.dev/repl/ace7458e21a448809b2cf0a0048b4b7f?version=3.8.0

It's look like problem was gone for now ( svelte 3.8.0 )

The problem still occurs for me, seems to happen when the <svg> element is not the root/top level element of the component

https://svelte.dev/repl/d0566c01757442fbbfdbe7fc73247081?version=3.8.0

[rikschennink]

@davebrent problem remains, with 3.8.0 my string literal solution stopped working :-)

[rikschennink]

@Rich-Harris

It resolves the issue on my side as well.

Small note. This has now stopped working:

<Icon>{@html '<rect x=0 y=0 width=20 height=20/>'}</Icon>

But this works.

<Icon><g>{@html '<rect x=0 y=0 width=20 height=20/>'}</g></Icon>

It's relevant to my use case because I receive the icon markup as a string in an object.

[schicks]

@Rich-Harris I am still experiencing this issue. @rikschennink 's workaround addresses it, but I'd love to understand better what the problem is with the other form.