1
shintendo 2022-08-29 18:34:11 +08:00
important 一把梭
|
2
HikariLan 2022-08-29 18:53:35 +08:00
太真实了兄弟,我这几天写的一个浏览器插件项目也有这个问题。
我的解决方案就很蠢蛋了:按需加载,需要用的时候 insertCSS 进去,用不着的时候直接 removeCSS ( |
3
thinkershare 2022-08-29 18:57:02 +08:00
直接使用 frame 做隔离
|
4
iwh718 2022-08-29 18:57:44 +08:00 via Android
我都是手写 ui
|
5
dtdths1 2022-08-29 18:58:45 +08:00
shadow
|
7
codespots 2022-08-29 19:03:48 +08:00
iframe 做隔离
|
8
DiamondYuan 2022-08-29 19:31:47 +08:00 via iPhone
1. shadow-dom
2. iframe 我建议用 shadow-dom |
9
kkocdko 2022-08-29 19:53:28 +08:00 1
shadow dom ,例如我这个在网页中插入悬浮按钮的代码片段:
https://github.com/kkocdko/user-scripts/blob/master/scripts/snippets/snippets.js#L15-L28 |
10
lisongeee 2022-08-29 19:54:25 +08:00 1
根据 css 优先级规则,你可以使用 scss 二次编译一遍 element-ui 提高你的样式的优先级权重
```scss .custom-affix { @import 'element-ui/lib/theme-chalk/index'; } ``` ```js document.body.classList.add('custom-affix') ``` |
12
duan602728596 2022-08-29 21:27:27 +08:00
可以修改 class 的前缀啊
|
13
beastk 2022-08-30 08:31:27 +08:00 via iPhone
important 或者 hook
|
14
firhome OP @kkocdko
@DiamondYuan @muzuiget 感谢大佬们的回复,决定采用 shadow dom 的方式, 但是现在又有个小问题。 我的 vue 组件插入到对方 body 上后,发现样式(<style>)标签还在对方的 head 里,这样导致样式不生效了,如果能让<style>到我的 shadow dom 里呢 |