Vis*_*sie 8 javascript web-component shadow-dom webpack vue.js
我正在使用 Vue.js 和vue-custom-element为网站制作一个可嵌入的小部件。一切都很顺利，直到我遇到了问题。
当我尝试使用包中的组件（带有 css）时。例如vue-number-input。css 被注入到网页的头部，即使它应该添加到影子根中。
正如您在这里所看到的，您会看到数字输入包中的 css 被注入到 head 内部，而其他样式则像它们应该的那样位于影子根中。
据我所知，我更改了使应用程序在影子根中工作所需的所有设置。
这是我vue.config.js的main.js（我在其中注册自定义元素）和我的组件（我在其中从包导入组件）。
有谁知道我该怎么做或者这是否可能？
小智 0
如果库本身将样式嵌入到页面的头部，那么除了编写一些脚本在初始化后手动将其复制到 Shadow dom 中之外，您无能为力。我在 Font Awesome 图标上遇到了同样的问题。幸运的是，他们为此提供了解决方案。（https://github.com/FortAwesome/vue-fontawesome#web-components-with-vue-web-component-wrapper）
| 归档时间： |
|
| 查看次数： |
3035 次 |
| 最近记录： |
