如何将 HTML 小部件与外部 CSS 隔离

我使用 AngularJS 开发了一个即时消息组件，可以向任何网页添加即时消息功能。该组件相当复杂，其样式表长达约 800 行。

当该组件部署到第三方网站时，我遇到了问题。有时，主机网站的 CSS 会影响聊天小部件的样式。

当组件被添加到新的 Wordpress 安装中时，将使用该屏幕截图。您可以看到按钮文本被 Wordpress 样式覆盖为大写。

问题是该组件将部署到数以万计的网站，因此根据具体情况解决每个小问题是不切实际的。也不可能知道这些更改是否会对另一个网站产生连锁影响。

我目前正在考虑的方法是创建一个非常全面的重置样式表 - 我将覆盖所有元素上的所有可能的样式。这会给我一个新的画布来开始。

这似乎是一项非常繁重的任务，所以我想知道是否有人设计出了更好的解决方案？

Note:

iFrame 是不可能的，因为聊天必须覆盖原始网页

就像卢卡建议的那样，使用命名空间是正确的答案。

虽然您可以使用 !important 或 iframe，但我不喜欢这两个答案，原因如下。

为什么你不应该使用 !important

1. 您的目标是创建无法被覆盖的 CSS。使用 !important 实际上并没有解决这个问题。我仍然可以凌驾于你之上 使用与您拥有的相同的特异性来设计样式。然而，这样做很痛苦。
2. Mozilla 特别推荐你不这样做。
3. 正如您自己所说，这可以在 10 万多个网站上使用。您将覆盖其他人的样式的可能性非常高。使用 !important 会毁了他们的一天。您已经有效地从 CSS 中去除了级联。通常，请使用您可以放心使用的最少的特异性。这让每个人的生活变得更轻松。

为什么 iframe 不是答案

我并不像反对使用 !important 那样反对使用 iframe，但您需要注意一些负面因素。

1. iframe 将控制权交给您（插件制造商），但代价是用户。例如用户别无选择，能否将您的 iframe 的响应能力与他们的网站相匹配。某些用户很可能会遇到一个无法与您的插件配合良好的特定断点。
2. 你的造型是不可能被覆盖的。这一点可以被视为对你来说是积极的，但我发现这对用户来说是消极的。能够设置插件的颜色样式有助于使插件成为网站的一部分。这保证了您的插件的颜色不会与某些网站很好地融合。让用户改变颜色对我来说是必须的。

使用命名空间

这个想法非常简单。假设您的应用程序名为 SuperIM2000。您要做的就是确保有一个具有相同类名的容器，并使用它来定位您的样式。这样做的另一个好处是允许您使用非常简单的类名，例如按钮。

HTML

<div class="superIM2000">
    <input class="button" />
</div>

CSS

.superIM2000 .button{
    color:#000;
}

正如您所看到的，特异性非常低。但是，您要覆盖其他人的样式的可能性非常低。这对用户也有好处。该按钮类可能已在其站点中使用，并且它可以利用您尚未覆盖的任何继承。