[Angular] How to styling ng-content

Let's say you are builing a reuseable component. The style structure like this:

div > input

If you want to style this input field, it can be quite easy, we can just use :host selector:

:host input {
  outline: none;
  border: none;  
}

 

But one day you figure out that hard cord input into the component might not be a good idea. You want to use content projection 'ng-content' to do that. Now the html stucture boecomes:

div > ng-content

Even you know the ng-content will be the input field. But he will find that your styling no longer works.

This is because Angular style encapsulation. It tries to preserve the style of projection element (because the element is not part of component, it has its own styling, we don't want to break that).

So the way to solve this problem is using CSS '/deep/' selector.

:host /deep/ input {
  outline: none;
  border: none;  
}

'/deep/' break angular style encapsulation. You can think it is a global css styling which can overwrite everything ..:P Sounds pretty prowerful, and a little bit damage, yes! it is.

 

For example, if you doning like this :

/deep/ input {
  outline: none;
  border: none;  
}

You will find that, all the input fields in your app has been affected!! So to be safe, use with :host selector.