Skip to content

Clarify information about deprecation of :ng-deep and recommend replacement #25160

Description

@cvmocanu

The documentation at https://angular.io/guide/component-styles states this about :ng-deep:

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 (for all 3 of /deep/, >>> and ::ng-deep).

As I understand, Angular was using the browser support for the piercing selectors /deep/ and >>>.

But :ng-deep is surely not supported by any browser.
And this is what I find confusing in the documentation. I don't understand what browser support has anything to do with :ng-deep.

The way I understand it, :ng-deep prevents Angular from appending the attribute selectors to all selector following it.

So, this CSS in a component:

:host ::ng-deep .my-button .ui-button-text {
    font-weight: bold;
}

will be transformed to:

[_nghost-c12]     .my-button .ui-button-text {
    font-weight: bold;
}

Without :ng-deep, this will be produced instead:

[_nghost-c12]     .my-button[_nghost-c12] .ui-button-text[_nghost-c12] {
    font-weight: bold;
}

(obviously breaking my intention).

I find 2 problems with the documentation, as it stands now:

  • I don't see any relationship between lack of browser support for piercing selectors and deprecating :ng-deep
  • I don't see any reason to deprecate :ng-deep (since it just tells Angular: "keep your attribute selectors away from my styles")

I propose the following:

  • if I missed anything, and there is a valid reason why :ng-deep should be deprecated, the documentation should be changed to explain why
  • if my reasoning above is correct, remove the section about deprecating :ng-deep, keeping the deprecation notice only for the piercing selectors /deep/ and >>>.

Activity

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

Metadata

Metadata

Assignees

Labels

P4A relatively minor issue that is not relevant to core functionsarea: docsRelated to the documentationcanonicalThis issue represents a canonical design issue in Angular.freq1: low

Type

No type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions