Angular 2 invisible component container

Question

Containers like <app-root></app-root> can do break the css layout, especially if working with flexbox.

Is it possible to have invisible component containers? I tried selector: '[app-root]' already with the following tags, but they all create a dom element:

<template>, <ng-template>, <ng-template>, <ng-container>

If this container is really needed, would be awesome if Angular would just render an HTML comment.

Answer 1

Personally I think the best way is to use selector as an attribute. For example, you have @Component like this:

...
@Component({
    selector: '[your-component]'
})
...

This way, your-component is an attribute, which you can use like this:

<div your-component>Some content...</div>

In this case you guarantee that styles won't break.

P.S. as far as I know this feature (replace in Angular 1) was deprecated in Angular 1, so it is not something that you would expect from Angular 2.

Answer 2

You can use display: contents on the host element to make it invisible to flexbox and grid layouts. The element does appear in the DOM, but it won't interfere with layout: its children will obey the layout rules of their grand-parent.

Unfortunately, display: contents is only available in Firefox right now, but support will grow with time. https://caniuse.com/#feat=css-display-contents