SVG with interpolation doesn't render in browser

[deotimedev]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

Run code:

use sycamore::prelude::*;

#[component]
fn Test<T: Html>() -> View<T> {
    view! {
        svg(width="100", height="100") {
            rect(width="100%", height="100%", fill="blue")
            (view! { rect(width="50%", height="50%", fill="red") })
        }
    }
}

fn main() {
    sycamore::render(Test);
}

Expected behavior Interpolated to render the same as non-interpolated

Environment

• Sycamore: 0.9.0-beta.1
• Browser: Chrome
• OS: Windows

Additional context Interpolated and non-interpolated SVG results in identical DOM, so it seems strange that it does not show on screen

[lukechu10]

I'm guessing that this has something to do with the element namespace in which it was created, although why that is happening I have no idea. Normally, rect and other SVG tags should always be created inside the SVG namespace.

[brynnjmccormick]

I believe @lukechu10 is correct, it does have to do with a lack of svg namespace. The problem comes from the implementation of instantiate_template for DomNode. By rendering to an HTML string and caching it, we lose the namespace. If you remove DomNode's implementation of instantiate_template and use the generic implementation, this bug does not occur.