Sukima3rd March 2021 at 8:42pm
It is possible now to yield different sections in a single component. Your wrapping component will yield a specially crafted hash which references a dummy component.
For example the dummy component foo-content:
{{yield}}And an example wrapper component foo-wrapper:
<div class="foo-wrapper">
  <div class="foo-wrapper__foo-a">
    {{yield (hash a=(component "foo-content"))}}
  </div>
  <div class="foo-wrapper__foo-b">
    {{yield (hash b=(component "foo-content"))}}
  </div>
  <div class="foo-wrapper__foo-c">
    {{yield (hash c=(component "foo-content"))}}
  </div>
</div>Would provide you (the consumer) with this syntax:
{{#foo-wrapper as |foo|}}
  {{#foo.a}}This is the Foo A component{{/foo.a}}
  {{#foo.b}}This is the Foo B component{{/foo.b}}
  {{#foo.c}}This is the Foo C component{{/foo.c}}
{{/foo-wrapper}}