1. You could add dummy attributes header and body as opposed to template references (#header, #body).
2. And transclude using ng-content with select attribute like select="[header]".

app.comp.html

<app-child>    <div header >This should be rendered in header selection of ng-content</div>    <div body >This should be rendered in body selection of ng-content</div></app-child>

child.comp.html

<div class="header-css-class">    <ng-content select="[header]"></ng-content></div><div class="body-css-class">    <ng-content select="[body]"></ng-content></div>

DEMO

To fit the Web Component specs. Even if that's Angular. It's about avoiding attributes for selector like Angular directives or reserved attributes with another use. So, we just use the "slot" attribute. We'll see <ng-content select="[slot=foobar]"> as <slot name="foobar">.

Example:

hello-world.component.html

<ng-content select="[slot=start]"></ng-content><span>Hello World</span><ng-content select="[slot=end]"></ng-content>

app.component.html

<app-hello-world>  <span slot="start">This is a </span>  <span slot="end"> example.</span></app-hello-world>

Result

This is a Hello World example.

Stackblitz Example

You can use any name you want like "banana" or "fish". But "start" and "end" are a good convention to place elements before and after.

alternatively you can use:

app.comp.html

<app-child>    <div role="header">This should be rendered in header selection of ng-content</div>    <div role="body">This should be rendered in body selection of ng-content</div></app-child>

child.comp.html

<div class="header-css-class">    <ng-content select="div[role=header]"></ng-content></div><div class="body-css-class">    <ng-content select="div[role=body]"></ng-content></div>