fix: remove ns within foreignObject node.fix #6642

src/core/vdom/create-element.js

@@ -126,13 +126,34 @@ function applyNS (vnode, ns) {
   vnode.ns = ns
   if (vnode.tag === 'foreignObject') {
     // use default namespace inside foreignObject
+    // #6642
+    removeNS(vnode)
     return
   }
+  walkChildren(
+    vnode,
+    child => isDef(child.tag) && isUndef(child.ns),
+    child => applyNS(child, ns)
+  )
+}
+
+function removeNS (vnode: VNode): void {
+  walkChildren(
+    vnode,
+    child => isDef(child.tag) && isDef(child.ns),
+    child => {
+      child.ns = undefined
+      removeNS(child)
+    }
+  )
+}
+
+function walkChildren (vnode: VNode, tester: Function, cb: Function): void {
   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 (tester(child)) {
+        cb(child)
       }
     }
   }

src/platforms/web/util/element.js

@@ -26,7 +26,7 @@ export const isHTMLTag = makeMap(
 // contain child elements.
 export const isSVG = makeMap(
   'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' +
-  'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
+  'foreignobject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
   'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
   true
 )

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({