svg foreignObject doesn't work if first tag in a component #4813
Comments
zephraph
changed the title
|
The Checkout updated fiddle. |
|
Right, I understand that. I was being a bit lazy with the example, but it still highlights the issue. As I said, the problem doesn't happen if foriegnObject isn't the first tag of the component. It goes without saying that it wouldn't work outside an svg tag. In my app svg is specified in a component that calls in the component I mentioned above. |
|
Please provide a minimal reproduction fiddle. |
|
Absolutely. This one shows the problem. See the error in the console. Notice that the child component (the https://jsfiddle.net/zephraph/758refqm/1/ Here's the exact same fiddle except foreignObject is wrapped in a |
|
Reopening since I'm not sure this is expected |
|
try this <html>
<body>
<svg id="svg">
<fo></fo>
</svg>
<svg style="display:none;">
<template id="fo">
<foreignObject></foreignObject>
</template>
</svg>
</body>
</html>Vue.component('fo', {
template: '#fo'
});
new Vue({
el: '#svg'
}); |
Vue.js version
2.1.10
Reproduction Link
https://jsfiddle.net/avnch8k5/
Steps to reproduce
1.) Create a component
2.) specify a foreignObject as the first tag in the component
3.) Look for errors in console output
What is Expected?
It should recognize that it's a valid tag and carry on
What is actually happening?
If you look at the code pen above you'll notice that vue is looking for a component called foreignObject but not finding one and gives a warning about that. Interestingly, with the inline template it still seems to work.
I was messing around with this in a single file component and it wasn't rendering. Same error spit out in the console as before. I noticed that it was making
foreignObjectall lowercase... same for therequiredFeaturesattribute. Otherwise I suspect it would work despite the warning.Here's the DOM output:
Interestingly if I uncomment the
gtag in front of theforeignObjecttag it works.The text was updated successfully, but these errors were encountered: