如何为Angular中通过innerHTML插入的<sup>元素设置自定义样式

问题根因 #

Angular默认启用**视图封装（ViewEncapsulation.Emulated）**机制，会给组件内所有原生存在的HTML元素添加唯一的属性前缀（比如_ngcontent-xxx），同时自动给组件样式文件里的选择器也加上对应前缀，避免组件样式互相污染。
而通过[innerHTML]动态插入的HTML内容，不会被Angular自动添加这个唯一属性前缀，所以组件样式文件里写的选择器无法匹配到动态插入的<sup>元素，样式自然不生效。

可行解决方案 #

方案1：使用::ng-deep伪类（最推荐） #

在组件样式中使用::ng-deep伪类，告诉Angular不要给该段样式加属性前缀，即可匹配到动态插入的元素。建议配合:host选择器使用，避免样式污染全局：

/* 写在当前组件的css文件中即可 */
:host ::ng-deep .headline sup {
    color: red;
}

方案2：将样式写到全局样式文件 #

直接把对应样式写到项目根目录的全局样式文件（通常是styles.css/styles.scss）中，全局样式不受视图封装限制，可以正常匹配所有元素：

/* 写在全局样式文件中 */
.headline sup {
    color: red;
}

方案3：关闭当前组件的视图封装 #

在当前组件的配置中关闭视图封装，组件内所有样式都会变成全局样式，直接生效：
首先导入ViewEncapsulation：

import { ViewEncapsulation } from '@angular/core';

然后在组件的@Component装饰器中添加配置：

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  // 新增下面这行
  encapsulation: ViewEncapsulation.None
})

之后你原来写的.headline sup样式就可以正常生效，注意这种方式会让当前组件的所有样式都变成全局样式，建议给组件内所有样式添加专属前缀避免和其他组件样式冲突。

以上方案都不需要加!important，只要选择器优先级足够即可正常生效。

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