有没有开发过浏览器插件的大佬，样式被覆盖有什么方案解决？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 817 天前的主题，其中的信息可能已经有所发展或是发生改变。

是这样的，ui 框架用习惯了。懒得手写。一个按钮弹框什么的也想用 element ui 之类的框架解决。

这样就会导致一个问题。网页面插入一些东西的时候(content ui)，如果对方网站有同样用 element ui 的话，对方如果写了全局的样式会对我插件 ui 有影响（毕竟 append 到对方的 body 里了）。

请问这种情况该怎么解决呢？

element

样式

对方

框架

15 条回复 • 2022-08-30 10:50:15 +08:00

shintendo

2022-08-29 18:34:11 +08:00

important 一把梭

HikariLan

2022-08-29 18:53:35 +08:00

太真实了兄弟，我这几天写的一个浏览器插件项目也有这个问题。
我的解决方案就很蠢蛋了：按需加载，需要用的时候 insertCSS 进去，用不着的时候直接 removeCSS （

thinkershare

2022-08-29 18:57:02 +08:00

直接使用 frame 做隔离

iwh718

2022-08-29 18:57:44 +08:00 via Android

我都是手写 ui

dtdths1

2022-08-29 18:58:45 +08:00

shadow

muzuiget

2022-08-29 18:59:11 +08:00

自己解决：shadow DOM
和框架合作解决：CSS 实验性功能 @layer

codespots

2022-08-29 19:03:48 +08:00

iframe 做隔离

DiamondYuan

2022-08-29 19:31:47 +08:00 via iPhone

1. shadow-dom
2. iframe

我建议用 shadow-dom

kkocdko

2022-08-29 19:53:28 +08:00

shadow dom ，例如我这个在网页中插入悬浮按钮的代码片段：
https://github.com/kkocdko/user-scripts/blob/master/scripts/snippets/snippets.js#L15-L28

lisongeee

2022-08-29 19:54:25 +08:00

根据 css 优先级规则，你可以使用 scss 二次编译一遍 element-ui 提高你的样式的优先级权重

```scss
.custom-affix {
@import 'element-ui/lib/theme-chalk/index';
}
```

```js
document.body.classList.add('custom-affix')
```

lisongeee

2022-08-29 19:58:29 +08:00

我发的代码你们没有高亮和缩进看起来不方便，评论 markdown 渲染及代码高亮可以用 /t/873825

duan602728596

2022-08-29 21:27:27 +08:00

可以修改 class 的前缀啊

beastk

2022-08-30 08:31:27 +08:00 via iPhone

important 或者 hook

firhome

2022-08-30 10:17:57 +08:00

@kkocdko
@DiamondYuan
@muzuiget

感谢大佬们的回复，决定采用 shadow dom 的方式，
但是现在又有个小问题。我的 vue 组件插入到对方 body 上后，发现样式（<style>）标签还在对方的 head 里，这样导致样式不生效了，如果能让<style>到我的 shadow dom 里呢

zhuweiyou

2022-08-30 10:50:15 +08:00

@firhome

shadow.appendChild(style)