Angular view encapsulation with external libraries

I use an external component in my component. I want to do some styling on this external component. Because of Angular View Encapsulation all css I define in my component are not propagated to this external component which is used in my html-template. In order to enable this propagation I set

encapsulation: ViewEncapsulation.None

That works. But then my css is applied to my whole project not to a particular component only. What I need is to tell Angular somehow: "Apply this css to this component and all child components of it, also external ones". Is that possible at all?

You can define this in your css. However, be carefull as ::ng-deep is quite a powerfull combinator and can cause problems if not used correctly. Also from the Angular website:

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular.

CSS:

 :host { color: red; }
 
 :host ::ng-deep parent {
   color:blue;
 }
 :host ::ng-deep child{
   color:orange;
 }
 :host ::ng-deep child.class1 {
   color:yellow;
 }
 :host ::ng-deep child.class2{
   color:pink;
 }

HTML:

  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>