如何避免子组件通过innerHtml添加的样式影响父组件？

这个问题我之前也碰到过，确实挺闹心的——Angular的Emulated样式封装对通过innerHtml插入的样式完全没辙，因为这些样式是直接插入DOM的，不会被加上Angular自动生成的隔离属性（比如_ngcontent-xxx），结果就跟全局样式一样乱跑，污染父组件的同名类。Native模式虽然能解决，但兼容性实在拉胯，总不能让用户换浏览器吧？给你几个靠谱的解决方案：

方案1：给子组件容器加唯一类名，限定样式作用范围 #

这是最稳妥、兼容性最好的方法，核心思路是给子组件的外层容器加一个独一无二的类名，然后让innerHtml里的样式都嵌套在这个类下面，这样样式就只会作用于子组件内部的元素。

修改你的代码如下：

子组件模板修改 #

<div class="child-content-container" [innerHtml]="content"></div>

父组件中content的样式修改 #

content:string = '<style>.child-content-container .header {background-color:red;color:white;}</style><div class="header">This is child content</div>'

这样父组件的.header是全局的绿色，子组件的.header因为被child-content-container限定，只会生效在子组件内部，完美隔离。

方案2：手动使用Shadow DOM封装（兼容大部分现代浏览器） #

Native模式用的是原生Shadow DOM，但现在大部分现代浏览器（Chrome、Firefox、Edge等）都支持手动创建Shadow根，我们可以自己给子组件的容器创建Shadow DOM，这样里面的样式会天然隔离，不会影响外部。

修改子组件代码：

import { Component, Input, ElementRef, AfterViewInit, ViewChild } from '@angular/core'

@Component({
 selector: 'child',
 template:`<div #contentContainer></div>`,
 encapsulation: ViewEncapsulation.None // 关闭Angular的自动封装，我们自己来
})
export class ChildComponent implements AfterViewInit {
 @Input('content') content;
 @ViewChild('contentContainer', { static: false }) contentContainer: ElementRef;

 ngAfterViewInit() {
   // 创建开放模式的Shadow根，样式完全隔离
   const shadowRoot = this.contentContainer.nativeElement.attachShadow({ mode: 'open' });
   shadowRoot.innerHTML = this.content;
 }
}

这样innerHtml里的样式会被限制在Shadow DOM内部，父组件的样式完全不受影响，而且兼容性比Native模式好太多，几乎覆盖所有主流浏览器。

方案3：用::ng-deep强制提升父组件样式优先级（应急用，不推荐） #

如果实在不想修改innerHtml的内容，可以在父组件的样式里用::ng-deep来强制提升自己.header样式的优先级，不过要注意::ng-deep已经被Angular标记为废弃，未来可能会移除，所以只适合临时应急：

::ng-deep .header {
 background-color:green !important;
 color:white;
}

为什么Emulated模式无效？ #

Angular的Emulated封装原理是给组件的所有DOM元素加上一个独特的属性（比如_ngcontent-abc123），然后把组件的样式都加上这个属性选择器（比如.header[_ngcontent-abc123]），这样样式只会作用于当前组件的元素。但innerHtml里的内容是直接插入DOM的，Angular不会给这些内容加上隔离属性，也不会处理里面的样式，所以这些样式会变成全局样式，自然就污染了父组件的同名类。

内容的提问来源于stack exchange，提问作者misterti