如何隔离可嵌入 Web 组件的 css 类

Question

我编写了一个用于数据可视化的可嵌入 Web 组件。除了js和html，当然还有关联的css classes。我需要隔离 css classes 这样它们就不会覆盖 and/or clobber css class 它嵌入的更大的 Web 应用程序上下文的名称。

实现此目标的最佳做法是什么？

Answer 1

解决此问题的一种可能方法是使用 scoped CSS。我不喜欢这个解决方案，只有在别无他法时才使用它。

刚刚发现不支持作用域，至少不是所有的浏览器都支持，only Firefox does

另一种解决方案是为所有 CSS 类 和 ID 使用前缀，但如果您的文件很大，这可能会花费很多时间。

顺便说一句，如果embedding means in an iframe, 没有问题，因为它不应用嵌入站点的css。