Html Question posted in
Some basic documentation can be found here.

Html – Isolate container div from website's styles without iframe

I have a simple textarea and a preview modal which shows me how the content of the textarea looks like in an email (so basically loads and shows the content as HTML).

Now, this preview is affected by my website’s styles and I want to isolate it, so that it’s as plain and exact as it would show when sent as email. I don’t want to use iframe as it’s not responsive, are there better ways to do it?

I’m using VueJS, but ideally I would like a solution that doesn’t require installing a plugin just for this. The solution I’m looking for is either in CSS, or vanilla javascript, or built-in Vue functionality

Tags:

2

Answers


  1. 0

    You can isolate an element using scoped attribute within the <style> tag:

    <style scoped>
.email-preview {
  all: initial;
}
</style>

    with "initial" you reset the CSS property.

    Login or Signup to reply.
  2. 0

    A non-VueJS answer

    You can restrict the scope of stylesheet rules by enclosing them in a @scope at-rule. (There seems to be no equivalent attribute if they are loaded via a <link rel="stylesheet"> element.)

    var style = mydiv.computedStyleMap()
console.log("background-color",
  style.get("background-color").toString(),
  "font-weight",
  style.get("font-weight").toString());
    @scope (:root) to (#mydiv) {
  body {
    background-color: yellow;
    font-weight: 700;
  }
  div {
    background-color: green;
  }
}
    <div>Subject to CSS</div>
<div id="mydiv">Exempt from CSS<br>
  <iframe src="https://httpbin.org/html"></iframe>
</div>

    The background-color in <div id="mydiv"> is transparent (rgba(0,0,0,0), not green as for the other <div>s), but this means that the yellow body background shines through.

    By contrast, the font-weight in both <div>s is bold (700) because it is inherited from the body.

    "Shining through" and "inheritance" are two ways in which CSS rules affect elements beyond their scope. In other words: Restricting the scope of CSS rules is different from restricting their effect.

    The answer to your question therefore depends on what you mean by "isolate". If you compare the solution to iframes, the message is mixed:

    • "Shining through" (of the background) affects <div id="mydiv"> as well as iframes.
    • "Inheritance" (of font weight) affects <div id="mydiv"> but not iframes.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search