自定义defineCustomElement实现中插槽缺失问题修复咨询

核心问题分析 #

@tony19的自定义defineCustomElement宏扩展了Vue原生能力以支持vue-router、pinia等插件，但默认未处理Vue插槽到原生自定义元素插槽的映射逻辑，导致插槽内容无法正确渲染。

解决方案步骤 #

1. 组件内手动映射插槽（使用renderSlot）

在组件的setup函数中，通过useSlots获取插槽，再用Vue的renderSlot函数明确渲染每个插槽，确保插槽内容被正确转发到原生自定义元素：

<template>
  <div class="container"></div>
</template>

<script setup lang="ts">
import { useSlots, renderSlot, h } from 'vue'

const slots = useSlots()

// 手动编写render函数，明确渲染所有插槽
return () => h('div', { class: 'container' }, [
  renderSlot(slots, 'header'),
  renderSlot(slots, 'default'),
  renderSlot(slots, 'footer')
])
</script>

2. 确保自定义元素启用Shadow DOM

在注册自定义元素时，指定shadowRootOptions开启Shadow DOM（原生自定义元素插槽依赖此特性）：

import { defineCustomElement } from '@tony19/vue-web-component-wrapper'
import MyComponent from './MyComponent.vue'

customElements.define('my-custom-element', defineCustomElement(MyComponent, {
  shadowRootOptions: { mode: 'open' }
}))

3. 正确使用插槽语法

• 在Vue组件中使用自定义元素时，保留Vue的v-slot语法：

  <my-custom-element>
    <template #header>
      <h1 class="text-xl">自定义头部</h1>
    </template>
    <p>默认插槽内容</p>
    <template #footer>
      <footer class="text-sm">自定义底部</footer>
    </template>
  </my-custom-element>
  

• 在原生HTML中使用时，使用原生slot属性：

  <my-custom-element>
    <h1 slot="header" class="text-xl">自定义头部</h1>
    <p>默认插槽内容</p>
    <footer slot="footer" class="text-sm">自定义底部</footer>
  </my-custom-element>
  

额外排查点 #

• 检查组件是否有重复的根节点：自定义元素要求单个根节点，否则插槽可能无法正确分发
• 确认@tony19的宏版本是否最新：部分旧版本可能存在插槽处理的bug，升级到最新版尝试

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