Component Layout

component-layout.js

// my-addon/addon/components/foo-base.js
import Ember from 'ember';
import layout from '../templates/components/foo-base';

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

// my-addon/addon/templates/components/foo-base.hbs
<div class="well well-sm">
  {{yield}}
</div>


// my-addon/addon/components/x-foo.js
import Ember from 'ember';
import layout from '../templates/components/x-foo';
import FooBase from '../components/foo-base';

export default FooBase.extend({
  layout: layout
});

// my-addon/addon/templates/components/x-foo.hbs
THE FOO = {{yield}}


// my-addon/app/components/foo-base.js
export { default } from 'my-addon/components/foo-base';

// my-addon/app/components/x-foo.js
export { default } from 'my-addon/components/x-foo';


And then in my app I use this

{{x-foo}}


Why is the output not this? Basically the merge of both foo base and x-foo templates

<div class="well well-sm">
  THE FOO =
</div>