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

V2EX = way to explore

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

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

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

是这样的，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)