Open mhluska opened 5 years ago
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}}
Before the render finishes, during the afterModel hook, my DOM looks like this:
Which is causing the title of the tab to momentarily be
<!--%+b:10%-->
I just upgraded to Ember 2.5.1:
The issue seems to be described here: https://github.com/glimmerjs/glimmer-vm/issues/796
The suggested fix is to use triple curlies in the
in-element
component. Which seems bad.