Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

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

Copy link
Copy link
@Marcarrian

Description

@Marcarrian
Issue body actions

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

Reactions are currently unavailable

Metadata

Metadata

Assignees

No one assigned

    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

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.