Use -in-element to render at appropriate time

Author: rondale-sc

addon/templates/components/head-layout.hbs

@@ -1 +1,3 @@
-<meta name="ember-cli-head-start">{{head-content}}<meta name="ember-cli-head-end">
+{{#-in-element headElement}}
+  <meta name="ember-cli-head-start">{{head-content}}<meta name="ember-cli-head-end">
+{{/-in-element}}

app/components/head-layout.js

@@ -3,5 +3,9 @@ import layout from 'ember-cli-head/templates/components/head-layout';
 
 export default Ember.Component.extend({
   tagName: '',
+  headElement: Ember.computed(function() {
+    let documentService = Ember.getOwner(this).lookup('service:-document');
+    return documentService.head;
+  }),
   layout
 });

app/instance-initializers/head-browser.js

@@ -1,6 +1,6 @@
 import ENV from '../config/environment';
 
-export function initialize(owner) {
+export function initialize() {
   if (ENV['ember-cli-head'] && ENV['ember-cli-head']['suppressBrowserRender']) { return true; }
 
   // clear fast booted head (if any)
@@ -15,9 +15,6 @@ export function initialize(owner) {
     document.head.removeChild(startMeta);
     document.head.removeChild(endMeta);
   }
-
-  const component = owner.lookup('component:head-layout');
-  component.appendTo(document.head);
 }
 
 export default {

fastboot/instance-initializers/head-fastboot.js

@@ -26,6 +26,7 @@
     "ember-cli-app-version": "^1.0.0",
     "ember-cli-dependency-checker": "^1.3.0",
     "ember-cli-eslint": "^3.0.0",
+    "ember-cli-fastboot": "^1.0.2",
     "ember-cli-htmlbars": "^1.1.1",
     "ember-cli-htmlbars-inline-precompile": "^0.4.0",
     "ember-cli-inject-live-reload": "^1.4.1",

package.json

@@ -1,3 +1,5 @@
+{{head-layout}}
+
 <h2 id="title">Welcome to Ember</h2>
 
 {{outlet}}

tests/dummy/app/templates/application.hbs

@@ -6,10 +6,11 @@ moduleForComponent('head-layout', 'Integration | Component | head layout', {
 });
 
 test('it renders', function(assert) {
+  let fragment = document.createDocumentFragment();
+  this.set('stuff', fragment);
+  this.render(hbs`{{head-layout headElement=stuff}}`);
 
-  this.render(hbs`{{head-layout}}`);
-
-  assert.equal(this.$('meta[name="ember-cli-head-start"]').length, 1);
-  assert.equal(this.$('meta[name="ember-cli-head-end"]').length, 1);
+  assert.equal(fragment.querySelectorAll('meta[name="ember-cli-head-start"]').length, 1);
+  assert.equal(fragment.querySelectorAll('meta[name="ember-cli-head-end"]').length, 1);
 
 });