Restrict CSS applying on a particular div

Question

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.

Answer 1

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.

• Source
• Also See

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).