angular - How to apply component CSS to dynamically injected HTML from an API? - Stack Overflow

admin管理员组

文章数量:1277540

I am receiving an HTML string from an API response and need to render it inside my Angular component while keeping the component's CSS styles applied.

What I have tried:

• Using [innerHTML], but the styles defined in my component's SCSS are not applied:

  <div class="content" [innerHTML]="htmlContent"></div>
  

  .content h3 {
    color: red; // This does NOT apply
  }
  

• Using DomSanitizer to bypass security restrictions:

  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
  
  htmlContent: SafeHtml;
  
  constructor(private sanitizer: DomSanitizer) {}
  
  ngOnInit() {
    this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(apiResponseHtml);
  }
  

  But the styles from the component still do not apply.

• Trying ::ng-deep .content h3 { color: red; }, but I want to avoid ::ng-deep since it's deprecated.

• Setting ViewEncapsulation.None in my component, but this makes the styles global, which I don’t want.

How can I render the API-provided HTML inside my component while keeping the component's scoped CSS applied?

I am receiving an HTML string from an API response and need to render it inside my Angular component while keeping the component's CSS styles applied.

What I have tried:

• Using [innerHTML], but the styles defined in my component's SCSS are not applied:

  <div class="content" [innerHTML]="htmlContent"></div>
  

  .content h3 {
    color: red; // This does NOT apply
  }
  

• Using DomSanitizer to bypass security restrictions:

  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
  
  htmlContent: SafeHtml;
  
  constructor(private sanitizer: DomSanitizer) {}
  
  ngOnInit() {
    this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(apiResponseHtml);
  }
  

  But the styles from the component still do not apply.

• Trying ::ng-deep .content h3 { color: red; }, but I want to avoid ::ng-deep since it's deprecated.

• Setting ViewEncapsulation.None in my component, but this makes the styles global, which I don’t want.

How can I render the API-provided HTML inside my component while keeping the component's scoped CSS applied?

• css
• angular
• angular-components
• dom-manipulation
• html-sanitizing

Share Improve this question Follow edited Feb 25 at 7:40 jonrsharpe 122k3030 gold badges267267 silver badges474474 bronze badges asked Feb 25 at 6:19 panagiotis lymperopoulospanagiotis lymperopoulos 1111 silver badge11 bronze badge

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You can set ViewEncapsulation.None and use the :host selector, so that the styles apply only to this component (host) and it's children:

@Component({
  ...
  selector: 'some-selector'
  styles: [`:host .content h3 { color: red; }`],
  encapsulation: ViewEncapsulation.None,
  ...
})
export class SomeComponent {
  ...

Else just scope the styles based on the component selector in the global-styles.scss.

global-styles.scss

some-selector {
  .content h3 {
    color: red; // This does NOT apply
  }
}

Thanks for your answer.

The third solution is to change the innerHTML from API to have the styles already.

But I need an other solution. ViewEncapsulation and global-styles are not so good solution for the project.

Please share another way if you know, thanks

本文标签： angularHow to apply component CSS to dynamically injected HTML from an APIStack Overflow