限制应用于特定div的CSS

Question

我正在创建一个Web应用程序，用户可以通过该应用程序创建电子邮件活动。 创建广告系列用户时使用CKEditor添加电子邮件内容。他可以添加内部CSS / JS。创建广告系列后，它看起来就像下面给出的图像。

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

如何准确显示email_content预览的显示方式？

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

Answer 1

使用此 -

#email_content * {
    all: unset;
}

这将重置所有globe CSS并且您可以使用内联CSS

Answer 2

这是一个常见的问题，但尚未有一个简单的通用解决方案。

Shadow DOM

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

  

Shadow DOM为Web组件中的DOM和CSS提供封装。   Shadow DOM使得这些东西与DOM的DOM分开   主要文件。您也可以在a之外单独使用Shadow DOM   网络组件。

     

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

• Source
• Also See

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

内部框架

另一方面是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 3

正如在article中解释的那样，您可以创建一个阴影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>