router-outlet should not affect layout (option to render as non-box/anchor) #64553

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

router

Description

is a marker element that does not contain the routed component’s DOM; the actual component root is rendered as a sibling after the outlet.
However, the outlet element itself still participates in layout (inline/box). This can interfere with CSS Grid/Flexbox flows, gaps, and alignment, forcing developers to add a global stylesheet rule like:

router-outlet { display: none; }

or similar hacks.

Related to: https://stackoverflow.com/questions/54868967/how-to-get-angulars-router-outlet-to-work-with-css-grid

Motivation

• Avoid layout artifacts (extra empty grid/flex item, unexpected inline box).
• Reduce boilerplate and “magic CSS” in every app and library.
• Make router behavior consistent with other Angular structural anchors, which use comment anchors and do not create a layout box.

Proposed solution

(any of the following would solve the problem)

1. Opt-in comment anchor for outlets

Add a configuration/flag so that router-outlet uses a comment node anchor (like @if) instead of an element.
Possible shapes:

Router config:

provideRouter(routes, { outletAnchor: 'comment' /* | 'element' (default) */ });

Or attribute/boolean input on the outlet:

<router-outlet anchor="comment"></router-outlet>

Or provide control-flow directive:

@router-outlet;

@router-outlet (name: 'secondary');

@router-outlet { placeholder };

@router-outlet (name: 'secondary') { placeholder };

2. Documented & bundled style

Officially document and ship a built-in global style (or recommend it prominently in the Router docs) so apps don’t need to rediscover it:

router-outlet { display: none /* or display: contents */; }

Alternatives considered

Keep relying on app-level CSS (router-outlet { display:none }).
Works, but it’s non-obvious, duplicated across apps, and easy to miss (especially inside Shadow DOM).