Ember Slots

components.my-component.js

import Ember from 'ember';

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

controllers.application.js

import Ember from 'ember';

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

helpers.id.js

import Ember from 'ember';

export function id(params/*, hash*/) {
  return document.getElementById(params[0]);
}

export default Ember.Helper.helper(id);

templates.application.hbs

{{#let (component 'my-component') as |cmp|}}

  {{#my-sloted-component 
    slotOne=(component cmp id="slotOne" tagName="h1")
    slotTwo=(component cmp id="slotTwo" tagName="h2")
  }}
  
  
  	<h3>Yeild</h3>
    
  {{else}}
   
   <h4>Inverse</h4>
  {{/my-sloted-component}}


  {{#-in-element (id 'slotOne')}}
    111
  {{/-in-element}}

  {{#-in-element (id 'slotTwo')}}
    222
  {{/-in-element}}

{{/let}}

templates.components.my-sloted-component.hbs

{{@slotOne}}
<h1>Middle</h1>
{{@slotTwo}}
{{yield}}
{{yield to="inverse"}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}