Add host class support for ViewEncapsulation.None in nx/angular:component generator

[ekkolon]

When using ViewEncapsulation.None there's room for improvement in how initial styling is scaffolded, especially around host classes and selectors.

At the moment, components generated with ViewEncapsulation.None:

• Still default to using the :host selector in the generated style file (which is ignored with None encapsulation).

• Do not apply any class to the host element, making the styles useless unless the developer manually adds a selector or host class.

• Render without display: block or any base styling, unless one chooses not to use None encapsulation - IMHO, this breaks layout expectations, and requires manual setup.

ViewEncapsulation.None gives us styling power at the cost of isolation, which is exactly what we want sometimes. But without scoped styling, these components depend on global selectors to apply styles.

This means a component is essentially headless from a CSS point of view unless the developer manually:

1. Adds a host class to the component metadata.

2. Updates the stylesheet to target that class instead of :host.

This becomes repetitive and error-prone when generating multiple such components.

Proposed Solution

When the user opts to generate a component with ViewEncapsulation.None, the generator should:

• Automatically set a host class via the host metadata property (defaulting to the component’s selector, unless overridden via a CLI option).

• Replace :host with that class in the generated stylesheet.

• Optionally apply display: block; as a base rule to preserve expected rendering behavior.

Example

A generated componenet with None encapsulation could look like this:

// card.ts

@Component({
  selector: "nx-card",
  templateUrl: "card.html",
  styleUrl: "card.scss",
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: { class: "nx-card" }
})
export class NxCard {}

// card.scss
.nx-card {
  display: block; 
}

Design Considerations

If the NX team were to approve this feature request, the implementation should ideally fit within the existing Angular component generator architecture with minimal to no disruption.

Admittedly, I haven't dug deeply into the internal structure of the NX Angular component generator yet. It's possible that supporting this kind of enhancement - injecting a host class and modifying the generated stylesheet accordingly - might require non-trivial changes to the generator logic and its templating system.

I think, whether it's worth implementing depends on:

• How cleanly the generator templates and logic can be extended to support conditional host class injection.

• whether this behavior could be toggled via a simple option (--host-class or --use-selector-as-host-class).

• How often this pattern occurs across real-world NX Angular workspaces using None encapsulation.

If the required change turns out to be overly invasive, I agree it might not justify the added complexity. However, if it's just a matter of injecting an additional field into the @Component() metadata and replacing a default style rule (:host) with a dynamic class selector, it could offer a small but meaningful UX boost with relatively low cost.