diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 60978622b..4c7aa911b 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -617,6 +617,20 @@ describe('SSR hydration', () => {
expect(spy).toHaveBeenCalled()
})
+ test('SVG as a mount container', () => {
+ const svgContainer = document.createElement('svg')
+ svgContainer.innerHTML = ''
+ const app = createSSRApp({
+ render: () => h('g')
+ })
+
+ expect(
+ (app.mount(svgContainer).$.subTree as VNode & {
+ el: Element
+ }).el instanceof SVGElement
+ )
+ })
+
describe('mismatch handling', () => {
test('text node', () => {
const { container } = mountWithHydration(`foo`, () => 'bar')
diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts
index 869e5809f..92cce5843 100644
--- a/packages/runtime-core/src/apiCreateApp.ts
+++ b/packages/runtime-core/src/apiCreateApp.ts
@@ -27,7 +27,8 @@ export interface App {
directive(name: string, directive: Directive): this
mount(
rootContainer: HostElement | string,
- isHydrate?: boolean
+ isHydrate?: boolean,
+ isSVG?: boolean
): ComponentPublicInstance
unmount(): void
provide(key: InjectionKey | string, value: T): this
@@ -224,7 +225,11 @@ export function createAppAPI(
return app
},
- mount(rootContainer: HostElement, isHydrate?: boolean): any {
+ mount(
+ rootContainer: HostElement,
+ isHydrate?: boolean,
+ isSVG?: boolean
+ ): any {
if (!isMounted) {
const vnode = createVNode(
rootComponent as ConcreteComponent,
@@ -237,14 +242,14 @@ export function createAppAPI(
// HMR root reload
if (__DEV__) {
context.reload = () => {
- render(cloneVNode(vnode), rootContainer)
+ render(cloneVNode(vnode), rootContainer, isSVG)
}
}
if (isHydrate && hydrate) {
hydrate(vnode as VNode, rootContainer as any)
} else {
- render(vnode, rootContainer)
+ render(vnode, rootContainer, isSVG)
}
isMounted = true
app._container = rootContainer
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index bc1d15452..b7973284f 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -93,7 +93,8 @@ export interface HydrationRenderer extends Renderer {
export type RootRenderFunction = (
vnode: VNode | null,
- container: HostElement
+ container: HostElement,
+ isSVG?: boolean
) => void
export interface RendererOptions<
@@ -2202,13 +2203,13 @@ function baseCreateRenderer(
return hostNextSibling((vnode.anchor || vnode.el)!)
}
- const render: RootRenderFunction = (vnode, container) => {
+ const render: RootRenderFunction = (vnode, container, isSVG) => {
if (vnode == null) {
if (container._vnode) {
unmount(container._vnode, null, null, true)
}
} else {
- patch(container._vnode || null, vnode, container)
+ patch(container._vnode || null, vnode, container, null, null, null, isSVG)
}
flushPostFlushCbs()
container._vnode = vnode
diff --git a/packages/runtime-dom/__tests__/createApp.spec.ts b/packages/runtime-dom/__tests__/createApp.spec.ts
new file mode 100644
index 000000000..00c9282e1
--- /dev/null
+++ b/packages/runtime-dom/__tests__/createApp.spec.ts
@@ -0,0 +1,15 @@
+import { createApp, h } from '../src'
+
+describe('createApp for dom', () => {
+ // #2926
+ test('mount to SVG container', () => {
+ const root = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+ createApp({
+ render() {
+ return h('g')
+ }
+ }).mount(root)
+ expect(root.children.length).toBe(1)
+ expect(root.children[0] instanceof SVGElement).toBe(true)
+ })
+})
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index 8a66ec994..773470621 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -69,7 +69,7 @@ export const createApp = ((...args) => {
}
// clear content before mounting
container.innerHTML = ''
- const proxy = mount(container)
+ const proxy = mount(container, false, container instanceof SVGElement)
if (container instanceof Element) {
container.removeAttribute('v-cloak')
container.setAttribute('data-v-app', '')
@@ -92,7 +92,7 @@ export const createSSRApp = ((...args) => {
app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
const container = normalizeContainer(containerOrSelector)
if (container) {
- return mount(container, true)
+ return mount(container, true, container instanceof SVGElement)
}
}