Vue3中如何覆写第三方导入包内定义的<Teleport />挂载目标

不需要修改组件源码，以下两种官方支持的方案都可以解决Single SPA场景下的样式隔离问题：

方案1：全局配置PrimeVUE默认挂载节点（推荐） #

PrimeVUE 所有内部弹出类元素（包括DataTable的筛选菜单、下拉面板、上下文菜单等）都会读取全局配置的appendTo默认值，即使组件本身没有暴露单独的appendTo prop也会生效。
在微应用入口初始化PrimeVUE时添加配置即可：

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import App from './App.vue';

const app = createApp(App);
app.use(PrimeVue, {
  // 注意选择器中的冒号是CSS特殊字符，必须用双反斜杠转义
  appendTo: '#single-spa-application\\:web-app-2'
});
app.mount('#single-spa-application\\:web-app-2');

该配置对PrimeVUE所有使用Teleport挂载的弹出元素全局生效，不需要逐个组件单独传参，3.x全系列版本均支持。

方案2：直接修改OverlayService默认配置（适配低版本PrimeVUE） #

如果使用的PrimeVUE版本较低不支持全局appendTo配置，可以直接修改PrimeVUE内置Overlay服务的默认挂载目标，DataTable筛选菜单本质是基于OverlayService渲染的弹出层，会读取该配置：

// 在微应用启动逻辑中执行
import { OverlayService } from 'primevue/overlayservice';

const microAppContainer = document.querySelector('#single-spa-application\\:web-app-2');
OverlayService.defaults = {
  ...OverlayService.defaults,
  appendTo: microAppContainer
};

避坑说明 #

• 选择器中的冒号属于CSS特殊字符，必须添加\\转义，否则会出现节点查找失败、菜单仍然挂载到body的问题
• 不要通过在全局body下写样式覆盖的方式修复，会破坏Single SPA的样式隔离规则，可能导致其他微应用的样式冲突
• 以上两种方案均为官方支持的配置能力，后续升级PrimeVUE版本不会出现兼容问题，完全不需要fork源码自行维护

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