element-plus styles lose
QC2168 opened this issue · comments
Describe the bug
After importing element-plus, the component does not work properly and the style is missing
Reproduction
https://github.com/QC2168/webext-ele-import-bug
System Info
System:
OS: Windows 11 10.0.22631
CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12600KF
Memory: 9.09 GB / 31.82 GB
Binaries:
Node: 18.19.0 - D:\software\nodejs\node.EXE
npm: 10.2.3 - D:\software\nodejs\npm.CMD
pnpm: 8.15.0 - ~\AppData\Local\pnpm\pnpm.CMD
Browsers:
Edge: Chromium (122.0.2365.80)
Internet Explorer: 11.0.22621.1Used Package Manager
pnpm
Validations
- Follow our Code of Conduct
- Read the Contributing Guide.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- The provided reproduction is a minimal reproducible of the bug.
the css vars of element-ui are declared under the :root pseudo-class, this won't affect the shadow dom, one solution is to replace :root with :host:
// vite.config.content.ts
export default defineConfig({
css: {
postcss: {
plugins: [
{
postcss(root) {
root.walkRules((rule) => {
if (rule.selector === ':root')
rule.selector = ':host'
})
},
},
],
},
},
})
naive ui creates style tags in the <head />, but content-script is isolated in a shadow root.
naive ui relies on the css-render library, there is a relevant PR about this issue 07akioni/css-render#1105, but it was merged 9 months ago and has NOT published a new version 🤔。