:host pseudo-element does not function with combinator selectors, such as :has(+ .my-class) #58436
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
No
Description
When writing scss using the :host pseudo-element, I've found that you cannot use combinator selectors within the :has() selector. For example, the following scss does not work:
:host:has(> child-element) {
//doSomething
}
However, this would normally be valid scss for any other given element.
There is a workaround, which is as follows:
::ng-deep {
my-host-component:has(> child-element) {
//doSomething
}
}
However, that requires using ng-deep, which is deprecated, and generally not a great practice.
Any other solutions would be appreciated!
Please provide a link to a minimal reproduction of the bug
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 18.1.3
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64
Angular: 18.1.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser
Package Version
@angular-devkit/architect 0.1801.3
@angular-devkit/core 18.1.3
@angular-devkit/schematics 18.1.3
@angular/build 18.1.3
@angular/cli 18.1.3
@schematics/angular 18.1.3
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.8
Anything else?
I have found this issue in any version I've tested (Angular 14 and 18), but have not tested others.