Reproduction:
// app/components/example-thing.js
exampleCss: computed(function() {
return [htmlSafe('.test > .thing'), ' { background-color: red; }'].join('\n');
}),
{{!-- app/templates/components/example-thing.hbs --}}
<style>{{exampleCss}}</style>
<div class='test'>
<span class='thing'>hi hi hi</span>
</div>
(then of course render this component in your index template or application layout)
Expected:
The div .thing should have text 'hi hi hi' and red background, even with js turned off.
Actual:
The div .thing has a red background with js turned on (after app has initialized in the browser) but no red background with js turned off. The CSS selector gets escaped by fastboot (transforming > into >) while it does not get escaped by ember-in-the-browser.
Reproduction:
(then of course render this component in your index template or application layout)
Expected:
The div
.thingshould have text 'hi hi hi' and red background, even with js turned off.Actual:
The div
.thinghas a red background with js turned on (after app has initialized in the browser) but no red background with js turned off. The CSS selector gets escaped by fastboot (transforming>into>) while it does not get escaped by ember-in-the-browser.