Restrict CSS applying on a particular div

user_4355179 0
Viewed 4257

I am making a web application through which user can create an email campaign. While creating campaign user adds email content using CKEditor. He can add internal CSS/JS. Once the campaign is created it looks like the image given below.

I have to show the email content preview in div #email_content exactly how it will appear. But common CSS written for the page is applied to #email_content and vice-versa. I don't have access to modify the common CSS.

How can I show the email_content preview exactly how it will appear?

Note: I know using iframe for email_content it is possible but I am looking for another workaround.

Single Campaign Page

css scope html
3 Answers

As it is explained in this article you can create a shadow dom element, in other words encapsulate your element to have its own css as it is shown here..

the outside css class will not affect your shadow dom element..

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>

user_28947980

This is a common problem that does not (yet) have a simple, universal solution.

Shadow DOM

Ideally you would use Shadow DOM, as it is specifically intended to solve such a problem:

Shadow DOM provides encapsulation for DOM and CSS in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document. You can also use Shadow DOM by itself, outside of a web component.

Why would you want to keep some code separate from the rest of the page? One reason is that on a large site, for example, if the CSS is not carefully organized, the styling for the navigation can "leak" into the main content area where it was not intended to go, or vice-versa. As a site or an app scales, this kind of thing becomes difficult to avoid.

Unfortunately, Shadow DOM isn't well-supported yet. But if you can control the target browser (e.g. an internal application), it may be a viable option.

Iframes

On the other end of the spectrum is an iframe. iframes are supported everywhere, but may require a larger change to the page than you are able to make. More importantly, iframes introduce undesirable scrolling behaviors on iOS that may change from version to version.

Targeted Reset

A practical, though not foolproof, solution is to create a CSS reset that only targets the content you want isolated.

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

This is one of the rare cases where it may be required to mark a rule as !important.

Targeted Unset (all/initial/unset)

Reset/remove CSS styles for element only

The answers to this question list possible solutions, but complete browser support does not appear to be present (notably IE).

user_4532770

use this -

#email_content * {
    all: unset;
}

this will reset all globe CSS and after you can use inline CSS

user_89794630
Related