在HTMLElement模板中呈现现有的vue3

Question

假设我有一个现有的htmlElement：const myElement = document.createElement('DIV');，我希望这个实例是vue3模板中的呈现器。

使用复合API，它看起来应该如下所示：

<template>
     <MyElement></myElement>
</template>
<script setup>
   const MyElement = document.createElement('DIV');
</script>

有人知道我能不能做到这样的事吗？

我的具体需求是以这种方式在vue3中使用三个is：

<template>
     <renderer.domElement></renderer.domElement>
</template>
<script setup>
   import { WebGLRenderer } from 'three';
   const renderer = new WebGLRenderer();
   [...]
</script>

而不是做这样的事情：

<template>
     <canvas ref="canvasRef"></canvas>
</template>
<script setup>
   import { onMounted, ref } from 'vue';
   import { WebGLRenderer } from 'three';
   const canvasRef = ref(null);
   const renderer = new WebGLRenderer();
   onMounted(async () => {
  const renderer = new WebGLRenderer({
    canvas: canvasRef.value as HTMLCanvasElement,
  });
});
</script>

->作为WebGLRenderer实例已经包含了一个现有的HTMLCanvasElement (renderer.domElement)，在我的例子中，如果可以在组件挂载之前声明渲染器，那将是非常有用的！

我尝试过jsx/render函数，我目前正在查看vue3自定义呈现器(但我不确定重载现有呈现器是否是一个好的解决方案.)

Answer 1

对于注入元素，可以使用v-html或任何讨论过的here方式。