[ionic-v4] styling dynamic content of innerHTML

Ionic Framework
1

I’m trying to figure out a proper way of how to apply styles of a dynamic html snippets that i load from the server and inject via [innerHTML]. In ionic v3 the styles that were in the page/component .scss file were applied, however with ionic 4 this is not the case anymore (i sort of understand why).

If i put the styles in global.scss file , they get applied, but they are ignored if i try to move them inside the page/component .scss file. Is there a more correct way of dealing with this other than using global.scss?

2

Another option i just discovered (again not sure if this is correct, but seems more right than global.scss), is to change the encapsulation method to None and wrap my scss into component selector so it doesn’t affect outside content:

in the page .ts file:

@Component({
  selector: 'app-live',
  templateUrl: './live.page.html',
  styleUrls: ['./live.page.scss'],
  encapsulation: ViewEncapsulation.None
})

and in the live.page.scss

app-live {
      ... styles for dynamicaly loaded innerHTML
}
2 Likes
3

If it’s injected, could you iframe that content in?
It’ll give you an extra layer of injectable security.

4

It’s a more complex page that request json data from the backend based on user interaction, and part of that data gets displayed in the placeholders using innerHTML, so using iframes is not applicable in this case

5

You just saved me lot of frustrations and you changed the decision of quitting ionic because of this