开发期间样式不适用于vue Web组件

CSS

猪猪蛋蛋

2020-03-13

在开发Vue Web组件时,style不会应用于Web组件,而是添加到head文档的中。这意味着在阴影DOM中将忽略样式。这是我将Web组件包装在main.js中的方法:

import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import MyWebComponent from './components/MyWebComponent';

const WrappedElement = wrap(Vue, MyWebComponent);

window.customElements.define('my-web-component', WrappedElement);

同样,样式标签内的所有CSS规则都不会生效。

当我进行生产时,样式添加到Web组件。我使用以下命令进行包装:

vue-cli-service build  --target wc --name my-web-component ./src/components/MyWebComponent.vue

有没有办法实现相同的目标vue-cli-service serve

编辑:示例回购在这里:https//github.com/snirp/vue-web-component

edit2:我觉得我的问题与此问题密切相关我对变通办法没有多大意义,我会看重一个更基本的解决方案。

第1475篇《开发期间样式不适用于vue Web组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android