feat(compiler): scope selectors in @scope queries

[puckowski]

This pull request makes sure selectors inside @scope queries are correctly scoped.

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

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.io application / infrastructure changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

Currently there is no support in the Angular compiler for the scope at-rule CSSWG [1] which is targeted for support in Chrome 117 Chrome Status [2] which means usage of this feature results in CSS that is not correctly scoped.

What is the new behavior?

Using the CSS scope at-rule results in properly scoped CSS.

Does this PR introduce a breaking change?

• Yes
• No

Other information

Angular will be ready for the new browser features when they ship.

[puckowski]

Did a rebase to latest main, files changed tab now looks correct.

[puckowski]

Did a rebase to latest main, files changed tab looks correct.

[puckowski]

Will refrain from further rebases (unless stated to be required) since there is 1 approval and a few pending reviewers.

[MarkTechson]

LGTM

[puckowski]

Here is a StackBlitz to test scoping of the CSS scope at-rule:
https://stackblitz.com/edit/stackblitz-starters-yucdgc?file=src%2Fmain.ts

You can run the above example using Chrome with the Experimental Web Platform features flag enabled in chrome://flags/.

On Angular 16.1.4 styles applied to my-app leak into app-hello.

This pull request should fix the style leak issue for the scope at-rule.

Looks like support was pushed to Chrome 118 [1] instead of Chrome 117.

[AndrewKushnir]

Global Presubmit (internal-only link).

[AndrewKushnir]

Caretaker note: TGP is "green", this PR is ready for merge.

[dylhunn]

This PR was merged into the repository by commit c27a1e6.

[puckowski]

Here is a StackBlitz to test scoping of the CSS scope at-rule with Angular 16.2.0-next.2:
https://stackblitz.com/edit/stackblitz-starters-vcbqhb?file=src%2Fmain.ts

You can run the above example using Chrome with the Experimental Web Platform features flag enabled in chrome://flags/.

I tested with: Version 117.0.5886.0 (Official Build) canary (64-bit)

Styles are now correctly scoped.

@scope ([data-scope='main-component']) to ([data-scope]) {
  p[_ngcontent-ng-c3427923494] {
      color: red;
  }

  section[_ngcontent-ng-c3427923494] {
      background: snow;
  }
}

@scope ([data-scope='sub-component']) to ([data-scope]) {
  p[_ngcontent-ng-c3427923494] {
      color: blue;
  }

  section[_ngcontent-ng-c3427923494] {
      color: ghostwhite;
  }
}

Thank you for merging this feature.

[AndrewKushnir]

@puckowski thank you for contributing this feature and improving Angular 👍

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}