After a couple days of researching I would resume the possible solutions:

1) :host selector

Like @Dixit and @JSON Derulo posted, is it possible to use the :host selector to display: content, or by adding the required style we want to use in the host HTML element.

2) host {...} properties

In the Angular 18 official docs they talk about this topic pretty explicitly. I suggest also this ng-conf video which is about exactly the problem of having a DOM with too many not-required elements.

At the end the practical solution I needed was something like:

@Component({
  selector: 'helloworld',
  standalone: true,
  imports: [],
  templateUrl: './helloworld.component.html',
  styleUrl: './helloworld.component.scss',
  host: {
    '[class.hello-1]': 'toggle()', // in case a toggle is needed for the class named hello-1
    '[class]': 'hello-2',          // in case we want just to assign a class
  }
})
export class HelloWorldComponent {
  toggle = signal(false);
}

3) @HostBinding

Using the decorator @HostBinding is possible to achieve the same behavior, but per documentation

Always prefer using the host property over @HostBinding and @HostListener. These decorators exist exclusively for backwards compatibility.