Skip to content

Conversation

@Gouvernathor
Copy link
Contributor

@Gouvernathor Gouvernathor commented Dec 9, 2025

Among the possible uses of ::ng-deep, this change specifies two different cases, and declares that the "Angular team's discouragement" on the use of ::ng-deep now only applies to one of these cases.

Follows #65718

The two cases are as follows :

  • using ::ng-deep at the start of a selector is still discouraged, as it applies style outside of the component, but inconsistently as it only triggers when the component is loaded.
  • using ::ng-deep in the middle of a selector is now okayed (whether the left part is :host or something else), as its effects are constrained to the HTML element of the component (and its descendents, whether written in the component's template, in child content, in non-recommended innerHTML bindings...).

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other... Please describe:

@pullapprove pullapprove bot requested a review from jelbourn December 9, 2025 19:23
@angular-robot angular-robot bot added area: docs Related to the documentation area: common Issues related to APIs in the @angular/common package labels Dec 9, 2025
@ngbot ngbot bot added this to the Backlog milestone Dec 9, 2025
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we would want any use-case in which ::ng-deep is recommended. Even in the scenario described in this PR, you're still reaching into encapsulated components and clobbering styles that are likely not intended to be overwritten by their author.

@JeanMeche
Copy link
Member

Per above.

@JeanMeche JeanMeche closed this Dec 9, 2025
@Gouvernathor
Copy link
Contributor Author

Gouvernathor commented Dec 9, 2025

@jelbourn yes, but I think there may be valid use cases for that, and that it overall doesn't even compare with the behavior of ::ng-deep at the start of a CSS selector.

I think a valid use case is when you want a reusable <hgroup>, where you want your component's users to pass <p> elements and one heading element, in arbitrary quantity and order, and possibly containing markup such as <span>, <em>, <a> and whatnot - which is a reason not to pass those by string component input. In that situation, it's obvious that your component has a good reason to apply style to its child contents. What's more, people passing child content to this component would or at least should expect style to be applied, as it's part of the component's purpose. To reuse your words, the authors of the child content of that particular component would be wrong not to intend that style to be overwritten.

Without saying that it's an Angular superhighway that everyone should use in their project, I think it would be fair not to discourage people to use this tool, in cases (such as this) where its behavior isn't chaotic.


Otherwise, I would ask you : if not using ::ng-deep, how should I implement the component described above in a new Angular app ?

@JeanMeche
Copy link
Member

JeanMeche commented Dec 9, 2025

You could either use design tokens like Angular Material does, or consider some css custom properties as part of your public API.

ng-deep is really a last resort solution when you have no other choice. Using ng-deep is akin to reaching to a private API.

@Gouvernathor
Copy link
Contributor Author

Gouvernathor commented Dec 10, 2025

I found no source in the Angular documentation about "design tokens". I doubt it's as easy to use as ::ng-deep.


Say I go with the custom CSS properties solution. That means that my component, the <hgroup>, needs to :

  1. publicly list all the CSS properties it intends to change on the child content
  2. specify the name of each CSS variable it will declare, and how it should be applied to CSS properties (which for which)
  3. the user of the component needs to manually apply all those variables to all those properties themself, for all the elements it passes as child content. And there's an additional layer of complexity if you want to use CSS selectors.

That seems to me like a giant bug nest, especially when compared to the simplicity of using ::ng-deep.


Using ng-deep is akin to reaching to a private API.

Yes, because this documentation declares it so, but that circles back to the reason why I want that to change.
What makes it so private ? Why preventing a component that would document itself as applying style to anything under it, from doing so ? Can you give a concrete example ?
More specifically, I don't see why using ::ng-deep in the specific way I described is more invasive than the other ViewEncapsulation modes, especially ViewEncapsulation.None which (as far as I understand it) is the same as the worst use of ::ng-deep. Doesnt ViewEncapsulation.ShadowDom also apply its own style to its child content just the same ?
Yet both of those remain fully documented and supported.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: common Issues related to APIs in the @angular/common package area: docs Related to the documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants