Hey there! I totally get wanting to upgrade Angular without overhauling existing code—breaking changes are never fun. Since /deep/, >>>, and ::ng-deep are being phased out, here are practical alternatives tailored to different needs, with a focus on minimizing code changes where possible:

1. ViewEncapsulation.None (Quickest Fix, With Caveats) #

This is the closest option to keeping your existing style code intact. Disabling Angular's style encapsulation lets your component styles apply globally, but you’ll need to scope them to avoid unintended side effects.

How to implement: #

Add the encapsulation setting to your component decorator:

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  encapsulation: ViewEncapsulation.None // Disable encapsulation
})

Then wrap your existing styles in the component’s selector to limit their scope:

app-my-component .child-component-class {
  /* Your existing shadow-piercing styles go here */
  color: #ff0000;
  padding: 1rem;
}

Note: This avoids rewriting style rules, but you’ll need to add the encapsulation line and scope selectors if they weren’t already targeted.

2. CSS Custom Properties (Sustainable Long-Term) #

Instead of piercing the shadow DOM, use CSS variables to pass style values down to child components. This maintains encapsulation and is the modern recommended approach.

How to implement: #

Define variables in the parent component’s styles:

:host {
  --child-text-color: #ff0000;
  --child-padding: 1rem;
}

Then reference them in the child component’s styles:

.child-element {
  color: var(--child-text-color, blue); /* Fallback to blue if variable is missing */
  padding: var(--child-padding, 0.5rem);
}

Benefit: Requires minimal changes to existing styles—replace hardcoded values with variables instead of using shadow-piercing selectors.

3. Pass Styling Inputs to Child Components #

Create explicit input properties in child components to accept style values, then apply them directly. This makes styling intent clear and keeps encapsulation intact.

How to implement: #

In the child component TypeScript:

@Input() textColor: string = 'blue';
@Input() padding: string = '0.5rem';

Apply the inputs in the child’s template or styles:

<!-- Template binding -->
<div class="child-element" [style.color]="textColor" [style.padding]="padding">
  Content here
</div>

Or in the child’s CSS (using Angular’s style interpolation):

.child-element {
  color: {{ textColor }};
  padding: {{ padding }};
}

Then pass values from the parent:

<app-child-component [textColor]="'red'" [padding]="'1rem'"></app-child-component>

4. Shared Style Sheets with Specific Selectors #

If you have styles that need to apply across components, move them to a shared CSS file and use hierarchical selectors to target child components without shadow piercing.

Example shared CSS: #

app-parent-component app-child-component .child-element {
  color: red;
  padding: 1rem;
}

Import the shared file into your parent component’s styles:

@import '../shared/styles/child-styles.css';

Note: This works best if your component hierarchy is stable, so the selector can reliably target the intended elements.

5. Temporarily Keep Using ::ng-deep (Short-Term Only) #

While Angular is deprecating ::ng-deep, some versions still support it (though it’s marked as deprecated). If you need to upgrade immediately without any code changes, you can keep using it—but be warned: this will stop working in future releases, and tools like linters will flag it. Use this only as a stopgap while you refactor to one of the above alternatives.

内容的提问来源于stack exchange，提问作者Omtechguy