如何在Vue组件中实现向Web Components插槽转发内容

为保证公司设计系统一致性，我们在共享库中实现了一个基于Web Component的页面模板，该模板包含若干插槽，代码如下：

export class PageTemplate extends LitElement {
  static properties = {
    title: { type: String },
  };
  render() {
    return html`
      <div>
        <h1>${title}</h1>
        <slot name="template-body"></slot>
        <div class="some-special-styles">
          <slot name="template-buttons"></slot>
        </div>
      </div>
    `;
  }
}

customElements.define("page-template", PageTemplate);

随后我们在Vue 3.2.45项目中封装了一个page-base.vue基础组件，用于多个页面复用该模板：

// page-base.vue
<template>
  <page-template title="My App Name">
    <slot name="base-body"></slot>
    <slot name="base-buttons"></slot>
  </page-template>
</template>

在具体页面（如login-page.vue）中使用该基础组件时，需要在叶子组件上手动声明slot属性才能让内容显示在Web Component的对应插槽中：

// login-page.vue
<template>
  <PageBase>
    <template #base-body>
      <div slot="template-body">
        <input placeholder="some special code"/>
      </div>
    </template>
    <template #base-buttons>
      <button slot="template-buttons">login</button>
      <button slot="template-buttons">back</button>
   </template>
  </PageBase>
</template>

如何实现Vue基础组件page-base.vue，避免在每个叶子Vue组件中手动设置slot属性？

尝试使用原生Web语法实现，但Vue未将slot属性传递到最终HTML：

// page-base.vue
<template>
  <page-template title="My App Name">
    <!-- 该方案无效 -->
    <slot name="base-body" slot="template-body"></slot>
    <slot name="base-buttons" slot="template-buttons"></slot>
  </page-template>
</template>

也曾尝试使用template作为中间层，但运行时无内容渲染：

// page-base.vue
<template>
  <page-template title="My App Name">
    <!-- 因模板特殊样式限制，无法使用该方式 -->
    <template slot="template-body"><slot name="base-body"></slot></template>
    <template slot="template-buttons"><slot name="base-buttons"></slot></template>
  </page-template>
</template>

使用中间元素（如span）可实现内容渲染，但因样式要求，最终组件需作为插槽最顶层节点，该方案不符合需求：

// page-base.vue
<template>
  <page-template title="My App Name">
    <!-- 可运行，但因模板特殊样式限制，无法使用这些span -->
    <span slot="template-body"><slot name="base-body"></slot></span>
    <span slot="template-buttons"><slot name="base-buttons"></slot></span>
  </page-template>
</template>

在Vue 3中，通过编写渲染函数可以直接完成插槽的映射转发，不需要额外DOM元素，完美适配样式要求。具体实现如下：

// page-base.vue
<script setup>
import { h, useSlots, defineRender } from 'vue'

const slots = useSlots()

// 直接定义组件的渲染逻辑
defineRender(() => {
  // 渲染page-template，并将base插槽映射到Web Component的对应插槽
  return h('page-template', { title: 'My App Name' }, {
    'template-body': slots['base-body'],
    'template-buttons': slots['base-buttons']
  })
})
</script>

修改后的page-base.vue可以直接在叶子组件中使用，无需手动添加slot属性：

// login-page.vue
<template>
  <PageBase>
    <template #base-body>
      <div>
        <input placeholder="some special code"/>
      </div>
    </template>
    <template #base-buttons>
      <button>login</button>
      <button>back</button>
   </template>
  </PageBase>
</template>

原理说明 #

Vue 3的h函数（创建虚拟DOM）允许我们为自定义元素（Web Component）直接指定插槽内容：

1. 第三个参数的键对应Web Component的插槽名称（如template-body）；
2. 值传入父组件通过useSlots获取到的对应插槽内容（如slots['base-body']）；
3. 这种方式直接完成插槽内容的转发，不会生成额外的DOM节点，完全满足样式对顶层节点的要求。

内容的提问来源于stack exchange，提问作者João Melo