Skip to content

CSS styles not applied if using attribute HostBinding and styling a DIV with the direct child selector in a production build #49100

@Marcarrian

Description

@Marcarrian

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
    }
  }
}

image

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.

transpiled css

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: compilerIssues related to `ngc`, Angular's template compilerregressionIndicates than the issue relates to something that worked in a previous version

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions