Vue3自定义SelectBox的Option组件：如何解决原生template不渲染问题？

问题场景 #

我正在开发SelectBox组件，当前Option的使用方式是：

<Options>
  <Option
    v-for="person in people"
    :value="person"
  >
    {{ person.name }}
  </Option>
</Options>

为了让Option支持自定义标签，我把它改成了动态组件：

<component :is="props.as || 'li'">
  <slot />
</component>

这样可以通过as指定渲染标签，比如div或者template，但当as="template"时，组件会渲染成HTML原生的<template>标签，这个标签在浏览器里不会显示内容，达不到预期的“无外层容器直接渲染slot内容”的效果。

解决方案 #

问题出在原生<template>标签的特性上——它本身是用于存放内容模板的容器，不会被渲染到DOM中。要实现需求，我们需要在组件里做判断：当as为template时，直接渲染slot；否则使用动态组件包裹。

修改后的Option组件代码：

<template>
  <template v-if="props.as === 'template'">
    <slot />
  </template>
  <component v-else :is="props.as || 'li'">
    <slot />
  </component>
</template>

这样处理后，设置as="template"时会直接渲染slot里的内容，不会添加任何外层容器；当as是其他标签（比如div、li）时，依然会用对应的标签包裹slot内容，完美匹配预期效果。

补充说明 #

Vue模板里的<template>是语法糖，不是真实DOM元素，仅用于分组内容或配合指令使用。而用<component :is="template">时，Vue会解析成原生HTML的<template>标签，这就导致了内容不显示的问题。通过显式判断并直接渲染slot，就能绕过这个原生标签的限制。

内容的提问来源于stack exchange，提问作者shuaige