usage of {{in-element}}

application.controller.js

import Controller from 'ember-controller';

export default class ApplicationController extends Controller {
}

application.route.js

import Route from 'ember-route';

export default class ApplicationRoute extends Route {
  activate() {
    super.activate(...arguments);
    document.body.classList.add('standard');
  }
}

application.template.hbs

{{#ui-navigation}}
	<ul role="menu">
    <li>{{link-to "Index" "index"}}</li>
    <li>{{link-to "Foo.Index" "foo.index"}}</li>
    <li>{{link-to "Foo.Child" "foo.child"}}</li>
  </ul>
{{/ui-navigation}}

<main class="container-fluid">
	{{outlet}}
</main>

components.ui-navigation.template.hbs

<header class="container-fluid">
  <nav>
  	<h1>Main Header</h1>
    {{yield}}
  </nav>
  <hr>
  <section id="secondHeader">
  	<!-- where {{in-element}} should go -->
  </section>
</header>

components.ui-second-header.component.js

import Component from 'ember-component';

export default class extends Component {
  constructor() {
    super(...arguments);
    
    this.headerTitle = 'Second Header';
    
    this.secondHeader = document.querySelector('#secondHeader');
  }
}

components.ui-second-header.template.hbs

{{#-in-element secondHeader}}
	<h2>{{headerTitle}}</h2>
  {{yield}}
{{/-in-element}}

foo.child.template.hbs

{{#ui-second-header}}
	...for <code>{{target.currentRouteName}}</code> route
{{/ui-second-header}}

foo.index.template.hbs

{{#ui-second-header}}
	...for <code>{{target.currentRouteName}}</code> route
{{/ui-second-header}}

index.controller.js

import Controller from 'ember-controller';

export default class IndexController extends Controller {
}

index.route.js

import Route from 'ember-route';

export default class IndexRoute extends Route {
}

index.template.hbs

{{#ui-second-header tagName=""}}
	...for <code>{{target.currentRouteName}}</code> route
{{/ui-second-header}}

router.js

import Router from 'ember-router';
import config from './config/environment';

const ApplicationRouter = Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

ApplicationRouter.map(function() {
  this.route('foo', function() {
    this.route('child');
  })
});

export default ApplicationRouter;

styles.app.css

nav {
  display: flex;
  align-items: flex-end;
}

nav > ul[role="menu"] {
  display: inline-flex;
  margin-left: 1rem;
  padding-left: 0;
  list-style: none;
}

nav > ul[role="menu"] > li:not(:first-of-type) {
  margin-left: 0.5rem;
}

twiddle.json

{
  "version": "0.12.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
  	"hack": "//cdn.staticfile.org/hack/0.7.7/hack.css",
    "standard": "//cdn.staticfile.org/hack/0.7.7/standard.css",
    "jquery": "//cdn.staticfile.org/jquery/3.2.1/jquery.min.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  }
}