Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在webcompent组件中不生效,已禁用shadow #32

Open
wangjiecamen opened this issue Apr 15, 2024 · 6 comments
Open

在webcompent组件中不生效,已禁用shadow #32

wangjiecamen opened this issue Apr 15, 2024 · 6 comments

Comments

@wangjiecamen
Copy link

image webcompent组件禁用了shadow机制,能受到外部样式的影响,但似乎该插件没有作用于组件内部
@wswmsword
Copy link
Owner

方便搞个小 demo 给我看下不,webcomponent 我还没搞过。

@wangjiecamen
Copy link
Author

wangjiecamen commented Apr 15, 2024

https://github.com/wangjiecamen/postcss-demo.git 进入 postcss-demo目录,运行pnpm run dev 即可 @wswmsword

@wswmsword
Copy link
Owner

应该和禁用 shadow 机制无关,插件主要是通过 PostCSS 扫描项目引入的 CSS 文件,然后转换。我看了下 postcss-demo 目录里引入的 web component 都是 js 文件,样式貌似也是写在 js 里的,所以就没有被扫描到了。
这个 web comoponent 文件夹里有个 CSS 文件,好像是没有用到,不知道干啥用的:
image

@wangjiecamen
Copy link
Author

应该和禁用 shadow 机制无关,插件主要是通过 PostCSS 扫描项目引入的 CSS 文件,然后转换。我看了下 postcss-demo 目录里引入的 web component 都是 js 文件,样式貌似也是写在 js 里的,所以就没有被扫描到了。 这个 web comoponent 文件夹里有个 CSS 文件,好像是没有用到,不知道干啥用的: image

css文件应该是用于webcomponent 样式的,你可以进入demo项目的外层,修改样式文件,打包生成dist组件目录,然后进入 postcss-demo目录引用该dist,就能看到效果了

@wangjiecamen
Copy link
Author

或者你可以直接运行 postcss-demo目录,应该可以看到是有样式文件引入的
@wswmsword

@wswmsword
Copy link
Owner

css 文件是用于外层打包 web component 时的样式,打包之后样式就被内嵌到 js 文件里了。在下面这个文件(p-45e98e86.entry.js)里修改一下样式,刷新浏览器,开发者工具也会显示样式被修改了。但是修改 css 文件的样式,刷新页面没有变化。

截屏2024-04-16 21 30 45 截屏2024-04-16 21 35 47

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants