CSS4 :not() does not work on :host #51273
Description
Which @angular/* package(s) are the source of the bug?
compiler, core
Is this a regression?
No
Description
CSS 4 supports multiple arguments for the :not() pseudo-selector. When applying this version of the pseudo-selector to :host inside an Angular component with ViewEncapsulation.Emulated, the generated CSS contains a superfluous [_ngcontent-ng-...] selector and does not match the expected elements.
Example: Selecting :host:not(.foo):not(.bar) and :host:not(.foo, .bar) should be equivalent. However, the generated CSS differs like this:
[_nghost-ng-c123]:not(.foo):not(.bar) {
/* generated by :host:not(.foo):not(.bar) */
}
[_nghost-ng-c123]:not(.foo, .bar)[_ngcontent-ng-c123] {
/* generated by :host:not(.foo, .bar) */
}Check the attached Stackblitz for a live demo of the issue.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-fbu7bj?file=src%2Fmain.ts
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 15.2.6
Node: 16.15.1
Package Manager: npm 8.13.2
OS: darwin x64
Angular: 14.3.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1402.11
@angular-devkit/build-angular 14.2.11
@angular-devkit/core 13.3.11
@angular-devkit/schematics 13.3.11
@angular/cdk 14.2.7
@angular/cli 15.2.6
@angular/material 14.2.7
@schematics/angular 13.3.11
ng-packagr 14.2.2
rxjs 7.8.0
typescript 4.8.4
Anything else?
No response
Reactions are currently unavailable