Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/vuejs/vue/issues/4813 below:

svg foreignObject doesn't work if first tag in a component · Issue #4813 · vuejs/vue · GitHub

2.1.10

https://jsfiddle.net/avnch8k5/

1.) Create a component
2.) specify a foreignObject as the first tag in the component
3.) Look for errors in console output

It should recognize that it's a valid tag and carry on

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4