html! seems to decapitalize case-sensitive SVG element tag.

[JmsPae]

Problem

<g ref={self.group_ref.clone()} transform={format!("translate({} {})", props.geometry.x-(sx/2), props.geometry.y-(sy/2))}>
          
    <rect ref={self.svg_ref.clone()}  
        width={sx.to_string()} height={sy.to_string()} 
        rx=5
        style="fill:white; stroke:grey; stroke-width:1"></rect>

    <image href="static/person-40.png" height="40" width="40" x="5" y="5"></image>

    <foreignObject x="45" y="0" width="100" height="100">
        <div >
            {"Test!"}
        </div>
    </foreignObject>
    
</g> 

Results in a box with the image, but the foreignObject doesn't show. The html output in the inspector looks like so:

SVG tags are case-sensitive, explaining why this wouldn't work. However, after either 1. adding the foreignObject via groupref.set_inner_html() or 2. modifying the element in the browser, the text displays just fine.

I can imagine that either there's a bug/im messing something up or somewhere along the the way yew de-capitalizes the element tags, which does make a degree of sense but makes this particular instance really bothersome.

Environment:

• Yew version: v0.20
• Rust version: 1.65.0

[WorldSEnder]

Since #2699, this is documented. Seeing it pop up from time and time again though, so we should perhaps change this to a different default and preserve the user-casing. The workaround in the linked issue should work though.

[JmsPae]

Since #2699, this is documented. Seeing it pop up from time and time again though, so we should perhaps change this to a different default and preserve the user-casing. The workaround in the linked issue should work though.

I see, thank you. That seems to have gotten the foreignObject tag to work, but I've seem to have come across another problem.

fn view(&self, _ctx: &Context<Self>) -> Html {
        let props = _ctx.props();
        
        let sx = 200;
        let sy = 50;

        html! {
            <g ref={self.group_ref.clone()} transform={format!("translate({} {})", props.geometry.x-(sx/2), props.geometry.y-(sy/2))}>
            
                <rect ref={self.svg_ref.clone()}  
                    width={sx.to_string()} height={sy.to_string()} 
                    rx=5
                    style="fill:white; stroke:grey; stroke-width:1"></rect>

                <image href="static/person-40.png" height="40" width="40" x="5" y="5"></image>


                <@{"foreignObject"} ref={self.text_ref.clone()} x="45" y="0" width="100" height="100"> // This now shows up properly in the inspector
                    <div>
                        {"Test!"} // Doesn't work.
                    </div>
                </@>
                
            </g>
        }
    }
    
    fn rendered(&mut self, _ctx: &Context<Self>, first_render: bool) {
        if (first_render) {
            let textelem = self.text_ref.cast::<Element>().unwrap();
            textelem.set_inner_html("<div>Test!</div>"); //_Now, it works._
        }
    } 

The div element and the contained text seem to not want to work unless I do the hack down in rendered. No clue what would cause this, I've also tried variables as well as the {"Test!"}.

[JmsPae]

Closed due to the original problem being resolved, still having trouble.

[WorldSEnder]

Can you open a specific issue about the new problem you are facing? I believe the handling of leaving the context of <svg> elements is wrong, and the <div> is erroneously created in the http://www.w3.org/2000/svg XML namespace, instead of the correct HTML one.

[JmsPae]

Can you open a specific issue about the new problem you are facing? I believe the handling of leaving the context of <svg> elements is wrong, and the <div> is erroneously created in the http://www.w3.org/2000/svg XML namespace, instead of the correct HTML one.

Will do.