angular-cli: Components should create a `display:block` style by default

After discussion in the CLI meeting, I just wanted to add that Google has a web components doc which recommends setting :host { display: block; } as a best practice because custom elements use display: inline; by default (though I’m told Angular components are not custom elements).

There is also an interesting foot gun, in that if a user manually adds :host { display: block; }, it will break the hidden attribute. The user actually wants:

:host {
  display: block;
}

:host([hidden]) {
  display: none;
}

Somewhat unrelated, but another mistake a user might run into is using :host[hidden], which doesn’t work due to custom element styles weirdness. If we do decide to make display: block the default, we should also include the extra style for hidden and possibly reference this doc as some justification.

The PR was merged on Thursday so it just missed the last release, however it should be included in 9.1.0-next.3 which should be published later today.

Considering I don’t think there’s any more work to do here, I think we can close this issue. Just waiting for it to roll out.

I discussed this with @StephenFluin and @jelbourn, both of whom were on board with the idea of adding this to the CLI schematic as an option. Since we have a PR for this, I think it’s reasonable to go forward with it. It’s just a matter of nailing down the best way of implementing this.

Also, just to include this here: @jelbourn argued against my previous point about :host([hidden]), because the hidden attribute is generally an antipattern (precisely because of this problem) and it might be better not to tacitly nudge users towards using hidden over *ngIf and other tools provided by Angular.

Regardless of the other points, this would be a breaking change as existing tooling solutions could very well assume that newly generated stylesheets are empty.

Something else to note is that a version of the css would be needed for each supported stylesheet preprocessor. Generate creates a stylesheet file specific to the default style setting.

Also, if this is indeed a sane default for all components, would this be better addressed at the Angular level itself?

I like the idea of prefix-* selector in CSS. It can be added along with comments explaining the issue and how to override the style using :host in the default Angular CLI style file, rather than adding another file to every component, and having to deal with whether the component has this default file or not, the order of file, specificity of selectors, etc.

If we want less cognitive overhead, and less magic, then not only we wouldn’t add more default files, but I’d say also not to go for CSS variables for this specific case.

The CSS code itself would be commented like the CLI does with polyfills, and introduced in a feature (minor version) release. Later, it can be decided whether to uncomment it by default in a major version release, along with explanation in the release announcement of course.