Adding `class` attribute to the component's host element also sets the same value to it's `className` input for some reason

[th0r]

🐞 bug report

Affected Package

Not sure

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.2.14 ### Description For example we have this component: ```ts import { Component, Input } from '@angular/core'; @Component({ selector: 'app-test', template: 'className is "{{ className }}" but should be undefined' }) export class TestComponent { @Input() className: string; } ``` If we use it like this: ```html ``` `TestComponent` will render `className is "foo" but should be undefined` which is not correct as `className` input was not provided. ## 🔬 Minimal Reproduction

Couldn't reproduce it on Stackblitz (it uses JIT compiler instead of AoT?) so created a separate repo with a minimal reproduction: https://github.com/th0r/ng9-classname-bug

Steps:

1. Checkout repo and run npm ci && npm start
2. Open http://localhost:4200/ in the browser
3. Page renders className is "foo" but should be undefined

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.3
Node: 12.16.0
OS: darwin x64

Angular: 9.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.3
@angular-devkit/build-angular     0.900.3
@angular-devkit/build-optimizer   0.900.3
@angular-devkit/build-webpack     0.900.3
@angular-devkit/core              9.0.3
@angular-devkit/schematics        9.0.3
@angular/cli                      9.0.3
@ngtools/webpack                  9.0.3
@schematics/angular               9.0.3
@schematics/update                0.900.3
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant? Bug doesn't depend on the browser used.

[mhevery]

Closing as duplicate of https://github.com/angular/angular/issues/35383

[th0r]

@mhevery I would agree if input name was class but it's className and current behavior is very counterintuitive. I don't assign className anywhere in the example.

[mhevery]

Angular treats class and className as the same thing (because <div [class]=""> would make no sense as there is no class property on <div> (there is class attribute, but [] is binding property).

Can you explain what kind of issues is this causing for you?

[kara]

Discussed offline: we are going to talk more about this one internally

[th0r]

We don't use styles encapsulation, but use BEM instead. Because of this most of our components contain single root element with class="name-of-the-bem-block" and sometimes we use className input to set class to this root element that override some styles for this BEM block. And it was very strange to see that both host and root elements have received the same classes.

Of course we can rename all such inputs to something like cls but it still doesn't eliminate the confusion aspect of this behavior.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}