Version

3.0.5

Reproduction link

https://codepen.io/hisrootness/pen/GRjxNzL

Steps to reproduce

1. Use createApp to encapsulate a <g> element with children representing SVG shapes.
2. Mount the app inside an existing <svg> element.

What is expected?

The nodes added by Vue app to the parent SVG image should be instances of SVGElement and should be able to affect the drawing.

What is actually happening?

The app nodes are added to DOM, but they are not instances of SVGElement and they don't draw anything on the parent SVG image.

In Vue2 I was able to add my component to existing SVG image (not created by Vue). In Vue3 SVG rendering only seems to work when the <svg> element itself is rendered by the Vue instance.

Here is example when the drawing works (the only difference from repro is that id="app" is above the <svg> element instead on it):
https://codepen.io/hisrootness/pen/MWjVbLJ

And here is an example showing that it used to work in Vue 2: https://jsfiddle.net/hisrootness/7nkob98v/1/

It's caused by runtime bug, not compiler. Here's the reproduction with render functions: https://codepen.io/sh7dm/pen/VwKXzbK

We should avoid checking whether an element is SVG in processElement, which can avoid a lot of computational consumption. And again, I didn’t notice @edison1105 's PR because I’m coding, sorry...