Angular: Как применить компонент CSS для динамически впрыскиваемого HTML из API? ⇐ CSS

[Anonymous]

Я получаю строку HTML от ответа API и должен представить ее внутри моего углового компонента, сохраняя применение стилей CSS компонента.
Использование [innerhtml], но стили, определенные в SCS моего компонента, не применяются: < /p>

Код: Выделить всё

.content h3 {
color: red; // This does NOT apply
}
< /code>
Использование Domsanitizer для обхода ограничений безопасности: < /p>
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

htmlContent: SafeHtml;

constructor(private sanitizer: DomSanitizer) {}

ngOnInit() {
this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(apiResponseHtml);
}
< /code>
Но стили из компонента все еще не применяются. } 

, но я хочу избежать :: ng-deep , поскольку это устарело. Global, что я не хочу. < /p>
Вопрос:
Как я могу отображать HTML, предоставляемый API внутри моего компонента, сохраняя при этом CSS с компонентом Применяется? Я также пробовал домисанитизатор :: ng-deep и viewencaplulation.none, но ни один из них не дал ожидаемый результат. Стили из моего компонента не применяются к динамически вставленному HTML. Мне нужно решение, которое держит CSS Scoped при применении его к инъецированному контенту.

Подробнее здесь: https://stackoverflow.com/questions/794 ... rom-an-api