怎么解决嵌入组件的 CSS 与 CSS 框架的效果冲突？

V2EX = way to explore

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

现在注册

已注册用户请登录

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

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

前端小白，做一个小工具 web 应用，用了 Bulma CSS 框架，需要在里面嵌入一个现成的 web 组件（ Redoc，在线 API 文档工具）。Bulma 的 CSS 影响了 Redoc 的显示效果。

如果能够将两者的 CSS 完全隔离，让 Bulma 的 CSS 不在 Redoc 里生效，那是最理想的。在 stackoverflow 上搜了一轮没有找到解决办法，有说需要把嵌入组件的 CSS 重写，加上 scope，但没见到具体怎么做的介绍。

难道只有使用 iframe 才可以避免 CSS 效果冲突？

8 条回复 • 2019-06-27 13:33:09 +08:00

avenger

2019-06-27 02:46:53 +08:00 via iPhone

组件最外层 wrap 一个唯一 id，当命名空间用

guojam

2019-06-27 03:26:36 +08:00

换 web 组件的 class 名吧，统一加前缀

wunonglin

2019-06-27 03:40:28 +08:00

修改 ui 框架变量 ng-md2 和 vuetifyjs 都可以

orancho

2019-06-27 04:00:21 +08:00 via Android

CSS Module

Perry

2019-06-27 05:52:42 +08:00 via iPhone

shadow dom ？

areless

2019-06-27 09:40:37 +08:00

PostCSS

kinghly

2019-06-27 10:52:44 +08:00

CSS Module

aleung

2019-06-27 13:33:09 +08:00 via Android

@Perry Shadow DOM 貌似就是为了解决这种问题的，昨晚试了一下没成功，从 template clone 到 shadow host 没有东西出来，可能什么地方做错了，要再研究一下。