Angular 2 - innerHTML styling
angular, innerhtml
Solution
update 2 `::slotted`
`::slotted` is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom`
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
update 1 ::ng-deep
`/deep/` was deprecated and replaced by `::ng-deep`.
`::ng-deep` is also already marked deprecated, but there is no replacement available yet.
When `ViewEncapsulation.Native` is properly supported by all browsers and supports styling accross shadow DOM boundaries, `::ng-deep` will probably be discontinued.
original
Angular adds all kinds of CSS classes to the HTML it adds to the DOM to emulate shadow DOM CSS encapsulation to prevent styles of bleeding in and out of components. Angular also rewrites the CSS you add to match these added classes. For HTML added using `[innerHTML]` these classes are not added and the rewritten CSS doesn't match.
As a workaround try
- for CSS added to the component
/* :host /deep/ mySelector { */
:host ::ng-deep mySelector {
background-color: blue;
}
- for CSS added to `index.html`
/* body /deep/ mySelector { */
body ::ng-deep mySelector {
background-color: green;
}
`>>>` (and the equivalent`/deep/` but `/deep/` works better with SASS) and `::shadow` were added in 2.0.0-beta.10. They are similar to the shadow DOM CSS combinators (which are deprecated) and only work with `encapsulation: ViewEncapsulation.Emulated` which is the default in Angular2. They probably also work with `ViewEncapsulation.None` but are then only ignored because they are not necessary. These combinators are only an intermediate solution until more advanced features for cross-component styling is supported.
Another approach is to use
@Component({
...
encapsulation: ViewEncapsulation.None,
})
for all components that block your CSS (depends on where you add the CSS and where the HTML is that you want to style - might be all components in your application)
Update
Example Plunker
Problem
I am getting chunks of HTML codes from HTTP calls. I put the HTML blocks in a variable and insert it on my page with [innerHTML] but I can not style the inserted HTML block. Does anyone have any suggestion how I might achieve this? ``` @Component({ selector: 'calendar', template: '<div [innerHTML]="calendar"></div>', providers: [HomeService], styles: [`h3 { color: red; }`] }) ``` The HTML that I want to style is the block contained in the variable "calendar".