Components should create a `display:block` style by default

From @SanderElias on September 7, 2018 11:19

I’m submitting a…

[ X ] Feature request
[ X ] Documentation issue or request

Current behaviour

When you create a new component, by default it gets no setting for css display.

Expected behavior

it should have display:block by default.

What is the motivation/use case for changing the behavior?

I know this has been discussed before (#5960), and pops up in (#12340) too. Still, I’m putitng this back on the roll. For the following reasons:

1. Current behaviour is confusing for new devs
2. Devs need display:block most of the time (for me, its 99+%)
3. The web doesn’t break if we put this in place.
4. The expected impact of this “breaking” change is minimal
5. Saves a few bits from the app’s payload
6. Less questions. no more, why does my css….
7. One more thing less to remember when creating a component.

I want to elaborate on point 3 a bit. The same discussion has been held in by standarts committee, If you follow along that discussion you will see that the general consensus is that it is actually a good idea, but it can’t be changed because that would break the web. Angular does not have that issue. Angular can change this, and the impact of the change would be minimal. probably something that has less impact as for example rxjs 5 to 6.

Others: If we don’t do this change, at least there should be more emphasis on this in the documentation.

Copied from original issue: angular/angular#25856

[dgp1130]

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.

[dgp1130]

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.