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

Question

我已经编写了一个可嵌入的Web组件以进行数据可视化。当然，除JS和HTML外，还有相关的CSS类。我需要隔离CSS类，以便它们不会覆盖和/或Clobber CSS类名称，它嵌入了较大的Web应用程序上下文。

实现这一目标的最佳实践是什么？

Answer 1

解决此问题的可能方法是使用范围的CSS。我不喜欢解决方案，只有在其他任何可能的情况下才使用。

我刚刚发现不支持范围，至少并非所有浏览器都支持它，只有Firefox才能

另一个解决方案是在所有CSS类和ID上使用前缀，但是如果您的文件很大，这可能需要很多时间。

顺便说一句，如果嵌入在iframe中，则没有问题，因为它不应用网站的CSS嵌入。