Vue 3在嵌套组件的阴影dom中加载CSS

Question

我正在开发一个可嵌入的小部件作为自定义元素。为此，我使用Vue。我创建了一个Widget.ce.vue文件，并在组件阴影根中启用样式加载。

但是通过这种方式，只会从组件本身加载样式，而不会从组件中使用的组件加载样式。

请告诉我，是否有一个解决方案，将允许我加载样式从所有嵌套组件在影子根?或者我需要将所有组件单独注册为自定义元素吗?

这是我的项目在codesandboxhttps://codesandbox.io/s/bold-moore-yu30i8

Answer 1

尝试将pay组件注册为自定义元素:

import pay from "./components/PaymentBtn.ce.vue";
window.customElements.define("payment-btn", defineCustomElement(pay));

并且在Widget.ce.vue组件中不导入它，只是像自定义元素一样渲染它。

<payment-btn label="Pay"></payment-btn>

没有尝试Vue-CLI，但它可以与Vite。