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

[aleung]

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

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

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

[avenger]

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

[guojam]

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

[wunonglin]

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

[orancho]

CSS Module

[Perry]

shadow dom ？

[areless]

PostCSS

[kinghly]

CSS Module

[aleung]

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