这是一个创建于 1151 天前的主题，其中的信息可能已经有所发展或是发生改变。
是这样的，ui 框架用习惯了。懒得手写。 一个按钮 弹框什么的也想用 element ui 之类的框架解决。
这样就会导致一个问题。 网页面插入一些东西的时候(content ui)，如果对方网站有同样用 element ui 的话，对方如果写了全局的样式 会对我插件 ui 有影响（毕竟 append 到对方的 body 里了）。
请问这种情况该怎么解决呢？
这样就会导致一个问题。 网页面插入一些东西的时候(content ui)，如果对方网站有同样用 element ui 的话，对方如果写了全局的样式 会对我插件 ui 有影响（毕竟 append 到对方的 body 里了）。
请问这种情况该怎么解决呢？
 | 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 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 里呢 |
Select Language