时间戳

首页 > 解决方案 > 在 shadow-root 中注入 CSS 样式而不是 head 标签 | Vue.js 和 Webpack

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

问题描述

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

当我尝试使用包中的组件（带有 css）时。例如像vue-number-input一样。即使应该将 css 添加到 shadow root 中，css 也会被注入到网页的头部。

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

正如您在此处看到的，您看到数字输入包中的 css 被注入到头部，而其他样式则像它们应该的那样位于阴影根中。

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

这是我的vue.config.js，我的main.js（我注册自定义元素的地方）和我的组件（我从包中导入组件的地方）。

有谁知道我怎么能做到这一点，或者这甚至可能吗？

谢谢！

标签： javascriptvue.jswebpackweb-componentshadow-dom

解决方案

如果库本身将样式嵌入到页面的头部，那么除了编写一些脚本在初始化后手动将其复制到 shadow dom 中之外，您无能为力。我在 Font Awesome 图标上遇到了同样的问题。幸运的是，他们为此提供了解决方案。（https://github.com/FortAwesome/vue-fontawesome#web-components-with-vue-web-component-wrapper）

推荐阅读