Contextual components

application.hbs

<Modal 
  @title="This is the title"
  @body="This is the <i>body</i>" 
/>

<Modal as |modal|>
  <modal.Title as |title|>
    This is the <i>title</i>!
  </modal.Title>
  <modal.Body as |body|>
    This is the <i>body</i>!
  </modal.Body>
</Modal>

modal-body.hbs

<div class="bg-yellow-200 p-4">
  {{#if hasBlock}}
    {{yield}} {{@name}}
  {{else}}
    {{@body}} {{@name}}
  {{/if}}
</div>

modal-header.hbs

<div class="bg-orange-200 p-4">
  {{#if hasBlock}}
    {{yield}}
  {{else}}
    {{@title}}
  {{/if}}
</div>

modal.hbs

<div class="bg-green-200 p-2 m-2">
  <div class="bg-blue-200">
    {{#if @title}}
      <ModalHeader @title={{@title}} />
    {{else}}
      {{yield (hash
        Title=(component 'modal-header' title=title)
      )}}
    {{/if}}

    {{#if @body}}
      <ModalBody @body={{@body}} @name="Alex" />
    {{else}}
      {{yield (hash
        Body=(component 'modal-body' body=body name="Alex")
      )}}
    {{/if}}
  </div>
</div>