fix: use correct ns inside <foreignObject> as root node

fix #6642
vuejs · Oct 2, 2017 · cf1ff5b · cf1ff5b
1 parent 894d380
commit cf1ff5b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/src/core/vdom/create-element.js b/src/core/vdom/create-element.js
@@ -122,17 +122,18 @@ export function _createElement (
  }
 }
 
-function applyNS (vnode, ns) {
+function applyNS (vnode, ns, force) {
  vnode.ns = ns
  if (vnode.tag === 'foreignObject') {
  // use default namespace inside foreignObject
- return
+ ns = undefined
+ force = true
  }
  if (isDef(vnode.children)) {
  for (let i = 0, l = vnode.children.length; i < l; i++) {
  const child = vnode.children[i]
- if (isDef(child.tag) && isUndef(child.ns)) {
- applyNS(child, ns)
+ if (isDef(child.tag) && (isUndef(child.ns) || force)) {
+ applyNS(child, ns, force)
  }
  }
  }

diff --git a/test/unit/modules/vdom/create-element.spec.js b/test/unit/modules/vdom/create-element.spec.js
@@ -141,6 +141,32 @@ describe('create-element', () => {
  expect(vnode.children[0].children[0].ns).toBeUndefined()
  })
 
+ // #6642
+ it('render svg foreignObject component with correct namespace', () => {
+ const vm = new Vue({
+ template: `
+ <svg>
+ <test></test>
+ </svg>
+ `,
+ components: {
+ test: {
+ template: `
+ <foreignObject>
+ <p xmlns="http://www.w3.org/1999/xhtml"></p>
+ </foreignObject>
+ `
+ }
+ }
+ }).$mount()
+ const testComp = vm.$children[0]
+ expect(testComp.$vnode.ns).toBe('svg')
+ expect(testComp._vnode.tag).toBe('foreignObject')
+ expect(testComp._vnode.ns).toBe('svg')
+ expect(testComp._vnode.children[0].tag).toBe('p')
+ expect(testComp._vnode.children[0].ns).toBeUndefined()
+ })
+
  // #6506
  it('render SVGAElement in a component correctly', () => {
  const vm = new Vue({