SVG foreignObject not working in Vue 2.0

[JollyGood1]

Vue.js version

2.0.3

Reproduction Link

https://jsfiddle.net/Linusborg/4j2v4fm9/

Steps to reproduce

• Run it once as is.
• Once without var vue = new Vue({ el: '#body'});
• Once with version 1.0.26 instead of 2.0.3.

What is Expected?

• In version 2.0.3 you will see no text inside the rectangle.
• When you run it without Vue the text will work fine.
• In version 1.0.26 the text will also be fine.

What is actually happening?

I don't know, but the resulting HTML stays the same whether the text is seen or not.

[LinusBorg]

Its happening consistently across all browsers (Chrome/FF/Safari), really weird.

[yyx990803]

The reason:

1. Vue 1.x parses the in-DOM template as-is, so everything is already having the correct namespace.
2. Vue 2.0 parses the template as a string and re-generates the DOM based on the generated virtual DOM. It has special treatment for the SVG namespace, but not for embedded XHTML, so the elements inside the foreignObject is generated with SVG namespace instead of XHTML.

Should be fixable by adding xmlns detection in the parser.

[JollyGood1]

Thanks for the fix.
It works now, and makes me very happy :)

[LinusBorg]

Please open another issue for this. This issue is too far down the list ^^