限制 CSS 应用于特定 div

Question

我正在制作一个 Web 应用程序，用户可以通过它创建电子邮件活动。 在创建活动时，用户使用 CKEditor 添加电子邮件内容。他可以添加内部 CSS/JS。广告系列创建后，如下图所示。

我必须在 div #email_content 中准确显示电子邮件内容预览的显示方式。但是为页面编写的通用 CSS 应用于#email_content，反之亦然。我无权修改通用 CSS。

---

我如何才能准确地显示 email_content 预览的外观？

注意：我知道将 iframe 用于 email_content 是可能的，但我正在寻找另一种解决方法。

Answer 1

这是一个常见问题，但（还）没有简单、通用的解决方案。

阴影 DOM

理想情况下，您会使用 Shadow DOM，因为它专门用于解决此类问题：

Shadow DOM 为 Web 组件中的 DOM 和 CSS 提供了封装。 Shadow DOM 使这些东西与 DOM 保持分离 主要文件。你也可以单独使用 Shadow DOM，在 网络组件。

为什么要将某些代码与其他代码分开？ 页？一个原因是，例如，在大型网站上，如果 CSS 是 没有精心组织，导航的样式可能会“泄漏” 进入不打算去的主要内容区域，或 反之亦然。随着网站或应用程序的扩展，这种事情变得 很难避免。

• Source
• Also See

很遗憾，Shadow DOM isn't well-supported yet。但如果您可以控制目标浏览器（例如内部应用程序），它可能是一个可行的选择。

iframe

另一方面是iframe。 iframes 在任何地方都受支持，但可能需要对页面进行比您能够进行的更大的更改。更重要的是，iframes 在 iOS 上引入了undesirable scrolling behaviors，可能会因版本而异。

有针对性的重置

一个实用但并非万无一失的解决方案是创建一个仅针对您想要隔离的内容的 CSS 重置。

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

这是需要将规则标记为!important 的少数情况之一。

有针对性的未设置（全部/初始/未设置）

Reset/remove CSS styles for element only

此问题的答案列出了可能的解决方案，但似乎不存在完整的浏览器支持（尤其是 IE）。

Answer 2

正如article 中所解释的，您可以创建一个 shadow dom 元素，换句话说，将您的元素封装为拥有自己的 css，如下所示。

外部的 css 类不会影响你的 shadow 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>

Answer 3

使用这个 -

#email_content * {
    all: unset;
}

这将重置所有地球 CSS 并且在您可以使用内联 CSS 之后