将 CSS 样式注入 shadow-root 而不是 head 标签 | Vue.js 和 Webpack

问题描述

我正在使用 Vue.js 和 vue-custom-element 为网站制作一个可嵌入的小部件。一切都很顺利,直到我遇到了问题。

当我尝试使用包中的组件(带有 css)时。例如vue-number-input。 css 被注入到网页的头部,即使它应该被添加到 shadow root 中。

经过大量研究,我还没有找到解决方案。

如你所见 here 你看到来自 number 输入包的 css 被注入到 head 中,而其他样式则像它们应该的那样在 shadow root 中。

据我所知,我更改了使应用程序在影子根中工作所需的所有设置。

这是我的 vue.config.js、我的 main.js(我注册自定义元素的地方)和 my component(我从包中导入组件的地方)。

有谁知道我如何做到这一点,或者这甚至可能吗?

谢谢!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)