限制 CSS 样式应用于特定的 div 元素

Question

我正在制作一个网页应用程序，用户可以通过它创建电子邮件营销活动。

在创建活动时，用户使用 CKEditor添加电子邮件内容。他/她可以添加内部CSS和JavaScript。一旦活动创建完成，它将呈现如下图所示。

我必须在

#email_content

中显示电子邮件内容预览，确切地如何呈现。但是，页面的通用CSS被应用于

#email_content

，反之亦然。我无法修改通用CSS。

---

我该如何准确地显示电子邮件内容的预览呢？

注意：我知道可以使用iframe来处理电子邮件内容。虽然这是可行的，但我正在寻找另一种解决方法。

- aagjalpankaj

---

使您的页面内容的 CSS 非常具体化，这样它只会针对您想要的元素进行操作，而不是预览面板中的元素 - 例如使用以 id 为目标的选择器而非以元素为目标的选择器。顺便问一下，允许用户添加自己的 CSS 是一个好主意吗？他们是否了解可用于电子邮件客户端的 CSS，以便其外观不会像普通网页上一样呈现？ - Pete

Answer 1

如此文章所述，你可以创建阴影DOM元素，换言之，封装你的元素以拥有自己的CSS，正如此处所示。

外部CSS类不会影响你的阴影DOM元素。

if (! Element.prototype.createShadowRoot && Element.prototype.webkitCreateShadowRoot) {
  Element.prototype.createShadowRoot = Element.prototype.webkitCreateShadowRoot;
}

var div = document.querySelector('#for-shadow');
var fileTemplate = document.getElementById("file-template");
var shadowDom = div.createShadowRoot();
shadowDom.appendChild(fileTemplate.content);

.outside{
    background: red;
    height: auto;
}

<div class="outside inside">from outside</div>
<div id="for-shadow">
<template id="file-template">
  <style>
    .inside{
      color:blue;
    }
  </style>
  <script>
    console.log('its js code');
  </script>
  <div class="outside inside">
    this is the div inside the template
  </div>
</template>

- Renzo Calla

---

这是我运行这段代码得到的结果：{ "message": "未捕获的类型错误：div.createShadowRoot 不是一个函数", "filename": "https://stacksnippets.net/js", "lineno": 35, "colno": 21 } - Branko Radojevic

Answer 2

这是一个常见的问题，目前还没有简单通用的解决方案。

影子DOM

理想情况下，您应该使用影子DOM，因为它专门旨在解决此类问题：

影子DOM为Web组件中的DOM和CSS提供了封装。Shadow DOM使它们与主文档的DOM保持分离。您也可以在Web组件之外仅使用Shadow DOM。

为什么要将某些代码与页面的其余部分分开？一个原因是，在大型站点上，如果CSS没有得到精心组织，则导航的样式可能会“泄漏”到未预期的主内容区域或反之亦然。随着站点或应用程序的扩展，避免这种情况变得困难。

• 来源
• 另请参阅

截至2022年，Shadow DOM得到了很好的支持。

iframe

另一方面，iframe处于另一端。iframe在任何地方都得到支持，但可能需要对页面进行更大的更改，而您可能无法做到这一点。更重要的是，iframe会在iOS上引入不良滚动行为，并且这些行为可能会从一个版本变化到另一个版本。

有针对性的重置

一个实用的解决方案（虽然不是绝对可靠）是创建一个CSS重置，仅针对您想要隔离的内容。

/* The start of a simple reset */
#email_content * {
    border: 0;
    margin: 0;
    padding: 0;
}

这是一种情况，可能需要将规则标记为！important。

目标取消设置（所有/初始/取消）

仅重置/删除元素的CSS样式

- Tim M.

Answer 3

请使用以下内容：

#email_content * {
    all: unset;
}

这将重置所有全局CSS，之后您可以使用内联CSS。

- Nitin Parmar

---

如果我还需要在 #email_content 中使用内部 CSS 呢？ - aagjalpankaj

内部CSS无法使用，您必须使用内联CSS。 - Nitin Parmar