title: Stop styles in `innerHTML` from impacting parent
body: <p>I have created an HTML email that displays correctly in a few email clients I've tested, but when I provide a preview of it on my page, the embedded styles in the <code>innerHTML</code> impact the parent.  It must be possible to avoid this because when I view the email in gmail it displays correctly without changing the style of gmail itself.</p>
  
  <p>Here's some HTML that shows the problem (but displays with no side effects in gmail):</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              * { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;pre style="white-space:pre-wrap;"&gt;Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test &lt;/pre&gt;
      &lt;/body&gt;    
  &lt;/html&gt; 
  </code></pre>
  
  <p>I'm using Angular 4 so I'm including it in my page this way:</p>
  
  <pre><code>&lt;div [innerHTML]="myHtml | safeHtml"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...and safeHtml is just a pipe to bypass the Angular checks on the HTML I'm injecting: </p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
  
  @Pipe({name: 'safeHtml'})
  export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitizer:DomSanitizer){}
  
    transform(html) {
  
      return this.sanitizer.bypassSecurityTrustHtml(html);
  
    }
  }
  </code></pre>
  
  <p>It works, in that it does show the html in the div, but the style info changes everything on the page.  I get it - I'm literally using <code>*</code> in my embedded style.  ...but as I say, gmail manages to 'contain' this somehow so it doesn't restyle the parent elements.  How do I accomplish this?</p>
  
  <p>Ideally I'd like total style isolation - like I don't want the parent styles to be impacted by the child or the child styles to be impacted by the parent (which, it seems, is how gmail is behaving).</p>
  
  <p><strong>Update</strong></p>
  
  <p>Changing the HTML to the following had it working for email, and contained the CSS, but didn't work embedded in Angular:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html class="my-class"&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              .my-class * { 
                  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
                  color: blue;
              }
              .my-class pre {
                  white-space:pre-wrap;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;pre&gt;Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test &lt;/pre&gt;
      &lt;/body&gt;    
  &lt;/html&gt;   
  </code></pre>
  
  <p>This is because (it seems) the <code>html</code> and <code>body</code> tags are stripped out when you embed this in a <code>div</code> (which makes some sense).  So, just add a parent containing <code>div</code> with the class and it all works - both embedded and in the email:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              .my-class * { 
                  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
                  color: blue;
              }
              .my-class pre {
                  white-space:pre-wrap;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="my-class"&gt;
              &lt;pre&gt;Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test &lt;/pre&gt;
          &lt;/div&gt;
      &lt;/body&gt;    
  &lt;/html&gt; 
  </code></pre>