Html CSS规则泄漏到页面的其余部分

背景：我有一套网页，客户可以在其中创建自己的电子邮件（通常是事情的提醒）发送给他人。它使用ckeditor，我允许他们在

标记中定义自己的样式规则。在另一页上，我展示了他们起草的所有电子邮件。（我基本上只是把他们从数据库中得到的东西输出到页面中）我不是在问这个的安全风险。我非常清楚它们是什么，以及如何处理它们。这不是问题。主要的问题是，如果我有一个名为

.button

的类，它可以将按钮转换为海军蓝颜色，并且它们在css中为同一类定义了某种样式，使文本变为黑色，那么它就会泄漏并将我的按钮文本变为黑色

问题：我如何让他们预览他们所写的内容，而不让他们的风格潜入我的网页并覆盖我的风格

我已经尝试过的事情：我尝试过一个iframe，但我不能完全弄清楚是否可以在其中嵌入代码。我也看到了

和

标记，但我不知道它们是否也有帮助

---

提前感谢您的帮助

您可以尝试将每个电子邮件html和css包装在其自己的影子DOM中：

---

阴影DOM通常仅用于此目的，以帮助确定html和css的范围。像Angular这样的流行框架也使用了阴影DOM。

一种方法是使用

！重要信息

在您自己的CSS中，这使您的CSS代码成为无法覆盖的默认值。例如：

。按钮{
背景色：海军！重要；
}

我猜这在IE 9中不受支持，对吗？我在一家很少更新软件的银行工作。你知道有什么类似的东西支持IE 9及以上吗？我感觉到了你的痛苦。IE本机不支持阴影dom。您可以尝试使用polyfill来启用它：我对此唯一的保留是我有很多样式，我不想使用！毕竟这一切都很重要，我担心这会在我提到的同一个案例中覆盖他们的风格。“我尝试了一个iframe，但我不能完全弄清楚是否可以在其中嵌入代码”——看看像JSFIDLE、codepen等平台是如何做到这一点的？它们通常只是将数据发布到iframe，并让接收该数据的服务器端脚本组装完整的HTML文档，包括所有的“噱头”。当然，客户端JavaScript也可以工作，访问iframe中显示内容的documentElement，然后基本上可以处理DOM所提供的一切，动态元素创建、样式表插入等等。此外，iframe更接近于依赖于视口大小的“真实事物”，而不是仅仅将内容输出到一个有限宽度的容器元素中。这是不幸的。我们有，但是。