svg foreignObject doesn't work if first tag in a component

[zephraph]

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 foreignObject all lowercase... same for the requiredFeatures attribute. Otherwise I suspect it would work despite the warning.

  //- g.HTMLNode
  foreignObject(
    requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
    width="100"
    height="100"
  )
    body(xmlns="http://www.w3.org/1999/xhtml")
      p hello world!
</template>

Here's the DOM output:

Interestingly if I uncomment the g tag in front of the foreignObject tag it works.

[znck]

The foreignobject tag should be a child of svg tag.

Checkout updated fiddle.

[zephraph]

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.

[znck]

Please provide a minimal reproduction fiddle.

[zephraph]

Absolutely.

This one shows the problem. See the error in the console. Notice that the child component (the ForeignComponent) is inside an svg tag.

https://jsfiddle.net/zephraph/758refqm/1/

Here's the exact same fiddle except foreignObject is wrapped in a g tag and doesn't exhibit the issue.

https://jsfiddle.net/zephraph/nsvrhpw5/1/

[posva]

Reopening since I'm not sure this is expected
Maybe foreignObject should be added to the list here