Add CSS class to Angular's generated custom elements

Which @angular/* package(s) are relevant/releated to the feature request?

compiler

Description

Right now, component elements in Angular are display: inline by default. This however is almost never desirable and in most cases breaks layouts. It is also quite confusing to people new to Angular – I think the best example here are flex-layouts that do not work “out of the box”.

Proposed solution

To minimize breaking changes, one of the better solutions would be to add a CSS class (e.g. ng-host) to all custom elements generated by Angular. That way, all custom elements could be styled by a single rule in the global style.css / style.scss file in the project space (e.g. .ng-host { display: block; }).

Maybe a flag could be added to the Angular.json settings to disable this behavior (maybe even by default) to keep the project size small on existing projects and projects that do not require this feature.

Alternatives considered

Seeing as it’s quite confusing for people new to Angular, an alternative could also be to make all elements display: block by default. This however would be a huge change for existing, bigger projects.

[DeffiDeffi]

Thank you so much, this is all very helpful. I did not know --display-block is a thing, I agree there’s no need for more complexity then!

[JoostK]

You might be interested to learn that the CLI’s schematic to generate new components has an --display-block option, which you can optionally enable by default in angular.json. It inserts :host { display: block; } into each newly generated component’s styles. This isn’t quite the same as what you’re requesting, but it’s a rather simple approach that doesn’t introduce additional complexity to the runtime.