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

[firhome]

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

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

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

[shintendo]

important 一把梭

[HikariLan]

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

[thinkershare]

直接使用 frame 做隔离

[iwh718]

我都是手写 ui

[dtdths1]

shadow

[muzuiget]

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

[codespots]

iframe 做隔离

[DiamondYuan]

1. shadow-dom
2. iframe


我建议用 shadow-dom

[kkocdko]

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

[lisongeee]

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

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

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

[lisongeee]

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

[duan602728596]

可以修改 class 的前缀啊

[beastk]

important 或者 hook

[firhome]

@kkocdko
@DiamondYuan
@muzuiget

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

[zhuweiyou]

@firhome

shadow.appendChild(style)