Angular 2 – innerHTML styling

by

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

More Related Contents:

  1. How to dynamically add innerHTML with angular 2 components
  2. Why am I seeing a dropdown like thingy and need to “open” my Angular component in chrome
  3. How can I use “*ngIf else”?
  4. How can I write data attributes using Angular?
  5. Repeat HTML element multiple times using ngFor based on a number
  6. How to get query parameters from URL in Angular 5?
  7. Use component in itself recursively to create a tree
  8. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  9. Connect method DataSource is not emitting all paginated rows for MatTable
  10. Getting instance of service without constructor injection
  11. Angular2: Insert a dynamic component as child of a container in the DOM
  12. How to install a specific version of Angular with Angular CLI?
  13. How to trace routing in Angular 2?
  14. How to use Dependency Injection (DI) correctly in Angular2?
  15. Angular – What is the meanings of module.id in component?
  16. Create a reusable FormGroup
  17. Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14
  18. Pass parameter into route guard
  19. Typescript dependency injection public vs private
  20. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  21. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  22. How to validate white spaces/empty spaces? [Angular 2]
  23. Style html,body from web component (Angular 2)
  24. How to create variable in ngFor loop?
  25. Angular Mat Select Multiple selectionchange finding which option was changed
  26. Call a function every 10 seconds Angular2
  27. Angular 4: “Cannot find name ‘require’
  28. How to send 1000 XHTTP Requests with maximum number of parallel requests
  29. `[(ngModel)]` vs `[(value)]`
  30. Angular Material2 theming – how to set app background?

Leave a Comment