Javascript 使div及其所有子类忽略父类样式

我正在制作一个应用程序，将html作为文本区域的输入，然后将该输入作为电子邮件发送给收件人。我想添加一个预览功能，将呈现的html，因为它会出现在一封电子邮件中，所以我需要能够呈现这个文本没有任何来自父样式的影响。本质上，我需要获取一个包含html的字符串，并在一个角度应用程序中呈现它，就好像它是自己的独立html文件一样。有没有办法让一个div里面的所有东西和它的所有子对象完全忽略所有的外部样式？现在，我以这种方式从字符串呈现html（emailBodyHtml只是一个包含输入html的字符串）：

---

您可以创建一个单独的组件，并使用

视图封装.Native

或

视图封装.Emulated

将样式包装到该组件中

我使用了

Native

将其作为影子dom元素，它与其他dom样式完全隔离

组件。ts

import { Component, Input, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<div [innerHTML]="emailBodyHtml"></div>`,
  encapsulation: ViewEncapsulation.Native
})
export class HelloComponent  {
  @Input() emailBodyHtml: string;
}

从'@angular/core'导入{组件，输入，视图封装}；
@组成部分({
选择器：“你好”，
模板：``，
封装：视图封装。本机
})
导出类HelloComponent{
@Input（）emailBodyHtml:string；
}