-
Notifications
You must be signed in to change notification settings - Fork 27.1k
Closed
Labels
area: compilerIssues related to `ngc`, Angular's template compilerIssues related to `ngc`, Angular's template compilerregressionIndicates than the issue relates to something that worked in a previous versionIndicates than the issue relates to something that worked in a previous version
Milestone
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
If using attribute HostBinding and styling a DIV element with the direct child selector, the styles are not applied.
This happens only in a producton build.
Reproduction:
app.component.html
<div class="example-1">
Example 1 (css: > div)
</div>
<div class="example-2">
Example 2 (css: div)
</div>
<section class="example-3">
Example 3 (css: > section)
</section>
<section class="example-4">
Example 4 (css: section)
</section>app.component.ts
import {Component, HostBinding} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
@HostBinding('attr.data-foo')
public foo = 'bar';
}app.component.scss
:host {
&[data-foo="bar"] {
> div.example-1 {
background-color: cyan; // not working
}
div.example-2 {
background-color: yellow; // working
}
> section.example-3 {
background-color: red; // working
}
section.example-4 {
background-color: green; // working
}
}
}
In the transpiled CSS we noticed various issues:
Example 1:
- "nghost" attribute is missing after the attribute selector [data-foo=bar]
- "nghost" attribute after div.example-1 should instead be "ngcontent"
Example 2:
- "ngcontent" attribute is missing after div.example-2. IMPORTANT! This is not the cause of this problem, but causes the styles to leak into child components. Please let me know if I should file a separate issue for this case.
Please provide a link to a minimal reproduction of the bug
https://github.com/Marcarrian/angular-15-attribute-host-binding-issue
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.1.5
Node: 16.16.0
Package Manager: npm 8.11.0
OS: win32 x64
Angular: 15.1.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1501.5
@angular-devkit/build-angular 15.1.5
@angular-devkit/core 15.1.5
@angular-devkit/schematics 15.1.5
@angular/cli 15.1.5
@schematics/angular 15.1.5
rxjs 7.8.0
typescript 4.9.5
Anything else?
No response
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
area: compilerIssues related to `ngc`, Angular's template compilerIssues related to `ngc`, Angular's template compilerregressionIndicates than the issue relates to something that worked in a previous versionIndicates than the issue relates to something that worked in a previous version

