Почему правила css не применяются к очищенным angular строкам, введенным в html?

Question

У меня очень странная проблема с правилом css, которое не применяется при вводе в html. Это код, который вставляет html:

decorate(text)
  {
    return this.sanitizer.bypassSecurityTrustHtml(text.replace('Doe','<b>Doe</b>'));
  }

в шаблон:

<h1 [innerHTML]="decorate('JohnDoe')"></h1>
<h1>Jane<b>Doe</b></h1>

Я добавил CSS правило для

h1 { color:#888; } 
h1 b {color:#ff0000;}

, но, тем не менее, JognDoe серого цвета, в то время как JaneDoe отображает Доу красным, как и ожидалось. Почему Johns'Doe не отображается красным цветом?

Rendered HTML выглядит следующим образом в инспекторе:

<h1 _ngcontent-c11="">John<b>Doe</b></h1>
<h1 _ngcontent-c11="">Jane<b _ngcontent-c11="">Doe</b></h1>

Для меня нет никаких оснований для Johndoe быть серым ..:

Я собрал небольшую песочницу с вопросом:

https://stackblitz.com/edit/angular-playground-pyjqju

Answer 1

Angular использовать ViewEncapsulation.Emulated по умолчанию. Это означает, что CSS будет применяться только к элементам текущего компонента. Из-за этого эмулированная инкапсуляция angular предотвращает применение стиля к внутреннему элементу HTML. Вы можете исправить это, изменив эмулируемое представление на none.

Попробуйте:

component.ts

import { Component, ViewEncapsulation } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html",
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  readonly name: string = "Angular";
  version: number = 7;

  constructor(private sanitizer: DomSanitizer) {}

  onVersionRelease(): void {
    this.version += 1;
  }
  decorate(text) {
    return this.sanitizer.bypassSecurityTrustHtml(
      text.replace("Doe", "<b>Doe</b>")
    );
  }
}