In Angular, each component has its own styles that don't affect other components. This is called view encapsulation. It helps keep styles modular and prevents conflicts across your app.

The Problem

Sometimes, you want a component's styles to affect elements outside of its own template, like child components or projected content (content passed in using <ng-content>). Due to view encapsulation, styles defined in a component usually can't reach beyond its own template.

The Solution: ::ng-deep

The ::ng-deep selector allows you to force styles to apply beyond the component's own template. It's like telling Angular, "Apply these styles deeply into any child components or projected content."

How to Use ::ng-deep

In your component's CSS file, you can write:

::ng-deep .some-class {
  /* styles here */
}

This means any element with the class some-class, even in child components, will have these styles applied.

Example Scenario

Imagine you have an app component and a test component inside it:

<div class="tests red-theme">
  <app-test></app-test>
</div>

You want to style elements inside app-test when it's wrapped in a div with the class red-theme. If you try to write this in test.component.css:

.red-theme .test {
  background-color: red;
  color: white;
}

It won't work because of view encapsulation. The styles in test.component.css can't reach out to the parent .red-theme class.

Using ::ng-deep to Fix It

To make it work, you can modify your styles like this:

::ng-deep .red-theme .test {
  background-color: red;
  color: white;
}

Now, the styles will apply because ::ng-deep allows the styles to penetrate view encapsulation boundaries.
You can it does not have any special _ngcontent attribute now. It is similar to plain global css styling.

Important Notes

• Use Sparingly: ::ng-deep makes styles global in a way, so it can lead to unexpected side effects elsewhere in your app. It's similar to writing styles in your global CSS file.
• Deprecated Feature: ::ng-deep is deprecated and might be removed in future versions of Angular. It's better to find alternative solutions.

Alternative Approach: :host-context

Instead of ::ng-deep, you can use the :host-context selector:

:host-context(.red-theme) .test {
  background-color: red;
  color: white;
}

• :host-context: This selector applies styles if the component is inside an element with the specified class (.red-theme in this case).
• Scoped Styling: Unlike ::ng-deep, :host-context keeps the styles scoped to the component, reducing the risk of affecting other parts of your app.
  
  

Things to keep in mind.

• View Encapsulation: Angular keeps component styles isolated by default.
• ::ng-deep: Allows styles to penetrate this isolation but can affect global styles and is deprecated.
• Use Alternatives: Prefer using :host-context or modify your approach to respect view encapsulation.

Now, we can place the same .red-theme class in-conjuction with .test in the same template ie. app component and it wont have any side-effect

// app.component.html

  <div class="tests red-theme">
    <app-test></app-test>
  </div>
  <div class="tests red-theme">
    <div class="test">
      This is a parent test container
    </div>
  </div>

// in the app component css file

.red-theme .test {
  background-color: rgba(255, 5, 5, 0.588);
  color: white;
  display: block;
}

By understanding ::ng-deep and :host-selector concepts, you can better manage styles in your Angular applications while avoiding potential pitfalls associated with breaking encapsulation.