fix: Teleport SVG elements

[yassilah]

Currently, when using Teleport to move an SVGElement or into an SVGElement, the element is not rendered . The issue is due to the fact that the Teleport "process" method is not checking whether the target element is itself an SVGElement and therefore uses createElement instead of createElementNS. This PR fixes that issue.

[yassilah]

PS: I don't know if it's necessary to add a test or even how I could test that, since the element is in fact added to the DOM, it is simply not being rendered.

[posva]

Can you provide a repro using one of the templates at https://new-issue.vuejs.org/?repo=vuejs/vue-next

[yassilah]

Sorry about that, i just created the issue: #2652 !

[LinusBorg]

Hi, thanks for the PR.

Can you add a test?

[edison1105]

use isSVGTag(target.tag) instead of this function.

[yassilah]

👍

[yassilah]

@LinusBorg I'm not quite sure how to add my test, I would either need a visual test or at least test if the element has the right namespace, but from what I saw, there is no namespaceURI on the TestElement class.

[posva]

One thing to note is that this only work if the target is an svg but not if the target is inside the SVG

[yassilah]

@posva what do you mean? i think this should work both if the target has an SVG tag or if the destination is an SVG element, or did i misunderstand how the Teleport.process method works?

[yassilah]

I've added a test but still i'm a bit confused about the way Teleport works because:

• in my tests, i needed to add a v-if or disabled prop to the Teleport component because i otherwise get an error saying the destination is invalid; that's not the behaviour i get when trying it out outside of a test;
• it seems that somehow the "target" can sometimes be an HTMLorSVGElement meaning the "tag" property does not always exist and should be tagName;
• i'm also confused about the fact that n1.props.to/n2.props.to don't match with the target when it is reactive (at least from the tests i ran); in my case even when n2.props.to is an SVGElement, the target is null.

This might all be related to the fact that i'm missing something about how to test the Teleport component.

[yyx990803]

FYI isSVGTag is for compiler only and should be avoided in runtime code since it bloats the bundle size.

[yyx990803]

I've added a test but still i'm a bit confused about the way Teleport works because:

• in my tests, i needed to add a v-if or disabled prop to the Teleport component because i otherwise get an error saying the destination is invalid; that's not the behaviour i get when trying it out outside of a test;
• it seems that somehow the "target" can sometimes be an HTMLorSVGElement meaning the "tag" property does not always exist and should be tagName;
• i'm also confused about the fact that n1.props.to/n2.props.to don't match with the target when it is reactive (at least from the tests i ran); in my case even when n2.props.to is an SVGElement, the target is null.

This might all be related to the fact that i'm missing something about how to test the Teleport component.

• The v-if is expected because a template ref could be null on the initial mount (which will trigger an update immediately when it's set).
• target should always be a resolved native element. It's not the to prop.
• Note sure what you mean about the props.to not matching (a test case might help)

[yyx990803]

Made some updates:

• isSVGTag is a compiler only helper. The original instanceof SVGElement check is actually better.
• However, Teleport is technically platform agnostic so we must check for typeof SVGElement !== 'undefined' first.
• ownerSVGElement is not necessary since all svg elements (not just <svg> itself) are instances of SVGElement.