Vuejs:CSS 加载在头部而不是 shadow-root 中



>我正在尝试在 Vue Web 组件中使用 vue-tel-input。但是,vue-tel-input CSS 并没有按预期由 Web 组件加载。

在头部而不是影根中加载的CSS.** 我不确定如何在影根中加载 css。

重现步骤:
在这里你可以看到一个简单的 Vue.js 应用程序,使用 vue-tel-input 字段。通过构建 Web 组件 (npm run build-wc) 并打开 demo.html在 dist 文件夹中,您可以看到 vue-tel-input 字段未正确呈现。

看图片

这里

如果你使用npm run build-wc命令将你的 Vue 组件编译成一个 Web 组件,那么你还需要保持 CSS 也是同一个文件的一部分。

因此,在您的代码中也添加import 'vue-tel-input/dist/vue-tel-input.css';或作为单个文件组件中的标记的一部分保留。 这样,分块的CSS将成为影子根的一部分。

最新更新