Glimmer rehydration causing title to have <!--%+b:10%-->

[mhluska]

Before the render finishes, during the afterModel hook, my DOM looks like this:

<!-- EMBER_CLI_FASTBOOT_TITLE --><script glmr="%cursor:0%"></script><!--%+b:7%-->  <meta name="ember-cli-head-start" content=""><!--%+b:8%-->
<!--%+b:9%--><!----><!--%-b:9%-->
<!--%+b:9%--><!----><!--%-b:9%-->
<!--%+b:9%-->  <title>&lt;!--%+b:10%--&gt;My Super Project Title&lt;!--%-b:10%--&gt;</title>
<!--%-b:9%-->
<!--%+b:9%--> 

Which is causing the title of the tab to momentarily be <!--%+b:10%-->

I just upgraded to Ember 2.5.1:

DEBUG: -------------------------------
vendor.js:17027 DEBUG: Ember             : 3.5.1
vendor.js:17027 DEBUG: Ember Data        : 3.5.0
vendor.js:17027 DEBUG: jQuery            : 3.3.1
vendor.js:17027 DEBUG: Ember Simple Auth : 1.7.0
vendor.js:17027 DEBUG: -------------------------------

The issue seems to be described here: glimmerjs/glimmer-vm#796

The suggested fix is to use triple curlies in the in-element component. Which seems bad.

[mhluska]

I came up with the following hack:

app/components/head-layout.js:

import { computed } from '@ember/object';
import { htmlSafe } from '@ember/string';
import { inject as service } from '@ember/service';

import HeadLayoutComponent from 'ember-cli-head/components/head-layout';

export default HeadLayoutComponent.extend({
  headData: service(),

  titleTag: computed('headData.title', function() {
    return htmlSafe(`<title>${this.get('headData.title') || ''}</title>`);
  }),
});

app/templates/head-layout.hbs:

{#-in-element headElement}}
  <meta name="ember-cli-head-start" content="">
  {{{titleTag}}}
  {{head-content}}
  <meta name="ember-cli-head-end" content="">
{{/-in-element}}