Contextual components yielding multiple blocks

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>

{{#my-component as |cmp|}}
  
    {{#cmp.header}}
       Header
    {{/cmp.header}}

    {{#cmp.body}}
      Body
    {{/cmp.body}}
     
    {{#cmp.footer}}
      Footer
    {{/cmp.footer}}
    
{{/my-component}}

my-body.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

my-body.template.hbs

<div id="body">
    {{yield}}
</div>

my-component.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

my-component.template.hbs

{{yield 
(hash 
    header = (component 'my-header')
    body = (component 'my-body')
    footer = (component 'my-footer')
)
}}

my-footer.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

my-footer.template.hbs

<div id="footer">
    {{yield}}
</div>

my-header.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

my-header.template.hbs

<div id="header"> 
    {{yield}}
</div>

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.3.0",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "2.3.0"
  }
}