CSS class binding with the @Component decorator host propery doesn't render correctly #68039
Description
Which @angular/* package(s) are the source of the bug?
compiler, Don't known / other
Is this a regression?
Yes
Description
With following component, and Tailwind complex classes. The class name md:col-[-3/-1] renders as md:col-[-3/-1 instead.
@Component({
selector: 'test-card',
host: {
'[class.md:col-[-3/-1]]': 'featured()',
},
template: 'Something'
})
export class TestComponent {
readonly featured = input<boolean>(false);
/*
This is the current workaround
@HostBinding('class.md:col-[-3/-1]')
get isFeatured() {
return this.featured();
}
*/
}Verified by unit test
describe('TestComponent', () => {
let fixture: ComponentFixture<TestComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TestComponent],
}).compileComponents();
// Set required inputs
fixture = TestBed.createComponent(TestComponent);
});
it('should add featured CSS classes when featured is true', async () => {
fixture.componentRef.setInput('featured', true);
fixture.detectChanges();
await fixture.whenStable();
const hostElement: HTMLElement = fixture.nativeElement;
expect(hostElement.classList.contains('md:col-[-3/-1')).toBe(false); // fails ( it renders this instead )
expect(hostElement.classList.contains('md:col-[-3/-1]')).toBe(true); // fails ( the rendering is incorrect )
});
});Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
The host attribute binding via @Component host property CSS class doesn't render the same as @HostBinding decorator. @HostBinding decorator works correctly.
Expected:
Host element class contains `md:col-[-3/-1]` when featured input is true
Actual:
Host element class contains `md:col-[-3/-1` when featured input is true
Please provide the environment you discovered this bug in (run ng version)
Angular CLI : 21.2.6
Angular : 21.2.7
Node.js : 24.14.1
Package Manager : npm 11.6.2
Operating System : win32 x64
┌───────────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────────┼───────────────────┼───────────────────┤
│ @angular-devkit/build-angular │ 21.2.6 │ ~21.2.0 │
│ @angular-devkit/core │ 21.2.6 │ ~21.2.0 │
│ @angular-devkit/schematics │ 21.2.6 │ ~21.2.0 │
│ @angular/build │ 21.2.6 │ ~21.2.0 │
│ @angular/cli │ 21.2.6 │ ~21.2.0 │
│ @angular/common │ 21.2.7 │ ~21.2.0 │
│ @angular/compiler │ 21.2.7 │ ~21.2.0 │
│ @angular/compiler-cli │ 21.2.7 │ ~21.2.0 │
│ @angular/core │ 21.2.7 │ ~21.2.0 │
│ @angular/forms │ 21.2.7 │ ~21.2.0 │
│ @angular/language-service │ 21.2.7 │ ~21.2.0 │
│ @angular/platform-browser │ 21.2.7 │ ~21.2.0 │
│ @angular/platform-server │ 21.2.7 │ ~21.2.0 │
│ @angular/router │ 21.2.7 │ ~21.2.0 │
│ @angular/ssr │ 21.2.6 │ ~21.2.0 │
│ @schematics/angular │ 21.2.6 │ ~21.2.0 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 5.9.3 │ ~5.9.2 │
│ vitest │ 4.1.2 │ ~4.1.0 │
└───────────────────────────────┴───────────────────┴───────────────────┘
Anything else?
Related Tailwind class documentation: https://tailwindcss.com/docs/grid-column#using-a-custom-value
Yup, Tailwind is weird.