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

Question

我编写了一个用于数据可视化的可嵌入Web组件。除了js和html之外，当然还有相关的css类。我需要隔离css类，以便它们不会覆盖和/或clobber嵌入的较大Web应用程序上下文的css类名。

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

Answer 1

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

我刚刚发现不支持范围界定，至少并非所有浏览器都支持范围，only Firefox does

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

顺便说一下，如果在iframe中嵌入意味着没有问题，因为它不会应用嵌入的网站的css。