Does vue 2.0 break SVG foreignObject?

#1

I had trouble migrating to 2.0 and couldn’t figure out why, I tried isolating the problem and this is what I came up with.

If I try to run the following code, I can’t see text.

<html>
<head>
<style>
rect {
	fill:white;
	stroke:black;
	stroke-width:2;
	
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="body">
	<svg>
		<g><rect x="0" y="0" rx="20" ry="20" width="200" height="100"></rect>
		<foreignObject x="10" y="20" width="180" height="80" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
			<body xmlns="http://www.w3.org/1999/xhtml"><p>Text goes here.</p></body>
		</foreignObject>
		</g>
	</svg>
</div>
<script>

this.vue= new Vue({
	el:'#body'
});

</script>

</body>
</html>

However, if I remove this.vue or change the script to 1.0.26, I see the text fine.
Is there a way to make it work in 2.0?

#2

That’s very strange. Replicted this on jsfiddle:

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

The strange thing is, the resulting HTML is the same (and with or without Vue, the element is gone), so I don’t see how Vue could have broken it …

Pasted image867×127 14.1 KB

#3

I also noticed the resulting HTML is the same.
Still, the only deference between the working and non working code is the Vue, so it must have changed something.

Should this be reported as a bug?

#4

Yes, please open an issue, and include my fiddle.

#5

Here’s the link to the issue

#6

Fixed in version 2.0.5.