为什么在 vue3 的 SFC 文件中引入的 webcomponents 无法渲染出来？

[qinhua]

Version

16.8.0

Reproduction link

codesandbox.io

Steps to reproduce

场景：vue-cli4 、 vue3.2

问题：在 vue3 的 SFC 文件中引入的 webcomponents 无法渲染出来

详情：由于web-icas这个组件是vue2的，为了能在vue3中使用，我用了 vue-cli 的 target wc 生成了 webcomponent 组件，并在 vue3 项目的 index.html 中引入了该组件。 通过查看 vue-cli 网站提供的文档，已经在 vue.config.js 中做了如下配置，但是当我在 SFC 中引入 webcomponents 后，组件内部的 shadow-dom 没有渲染，但放到 vue2 里面可以渲染出来。现在只能放在 index.html 中才能使用，这样不灵活。不知道是什么原因导致的，也没有报错。

// vue.config.js
 config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap((options) => {
        // 排除自定义标签（web-component）
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: (tag) => ["web-icas"].includes(tag),
        };
        return options;
      });

SFC组件内容

// login.vue
<template>
  <web-icas page-show="login"></web-icas>
</template>

What is expected?

希望 vue文件中引入的 web-icas 组件正常渲染出来

What is actually happening?

目前只渲染了自定义标签，内部的 shadow-dom 没渲染出来

---

以下场景是正常的： 1、直接在 index.html 中使用该组件； 2、在 vue2 的 SFC 文件中引入该组件。

[Justineo]

IIRC CodeSandbox does not support vue.config.js for client sandboxes. You need to use their container sandboxes or create a GitHub repo to provide the reproduction. BTW are your web-icas components working with vanilla JavaScript at the moment?

[haoqunjiang]

Closing due to lack of response.