Feature request: Attach to SVG elements

[runarberg]

Is your feature request related to a problem? Please describe.

I was testing a component that renders an SVG element (e.g. <rect>), but when I tried to attach it to another SVG element during mount I noticed that my typescript type checker claimed that attatchTo must be either a HTMLElement or a string. Reading the code I noticed that mount will always create a <div> wrapper element, even when I ignore my type checker and provide an SVG element to the attacheTo option.

Here is an example of a mounted SVG element which goes into an HTML element that is inside another SVG element, resulting in this weird structure.

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
document.body.append(svg);

const wrapper = mount(RectComponent, { attachTo: svg });
// error TS2322: Type 'SVGSVGElement' is not assignable to type 'string | HTMLElement | undefined'.

<svg>
  <div data-v-app="">
    <rect x="0" y="0" width="10" height="10" ></rect>
  </div>
</svg>

Describe the solution you'd like

It would be nice if mount would be smarter about which element it wraps around the mounted component. If the attachTo element is an SVG element, it should perhaps wrap in a <g> instead of a <div>. Similarly if the attachTo element is a MathML element, perhaps it should wrap it in an <mrow>.

Describe alternatives you've considered

We could also allow to configure the wrapper element factory, so instead of just blindly creating a div we could accept a function which creates the desired element.

Or we could simply change the typing of the attachTo from HTMLElement | string to Element | string and leave everything else as is. Having this weird HTML/SVG structure is unlikely to yield any issues inside an isolated testing environment.

Additional context

[cexbrayat]

Hi @runarberg

Thanks for the detailed issue.
I think we can just relax the typing of attachTo for now 👍

Would you like to open a PR? It would be a great help for us.