Angular mounting in component testing weirdly overlaps properties

[Pau]

Description

When I mount and angular component several times, I expect either the previous instance is removed or a new instance is added. Instead, it overrides the previous component but some elements are not reset, for example the @HostBinding classes are added every iteration of the mount without cleaning the previous one.

URL of Issue(s)

cypress-io/cypress#24329

Steps to replicate

1. Mount an standalone angular component with a property binded to the host. Component example:

@Component({
    selector: 'custom-button',
    template: `<button>This button parent class will change</button>`,
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [NgIf]
})
export class CustomButtomComponent {

    @HostBinding('class')
    @Input()
    buttonType: string = '';
}

Use cy.mount(CustomButtomComponent, { componentProperties: { buttonType: 'class1' } });

2. Mount the component Again using cy.mount(CustomButtomComponent, { componentProperties: { buttonType: 'class2' } });
3. Run the test
4. See the parent div of the component have class="class1 class2"

Browser

Google Chrome 120

Device

• PC
• Mac
• iPhone
• iPad
• Android Phone
• Android Tablet

Additional Information

No response