Reducing confusion around HTML comments and Glimmer blocks

[davidtaylorhq]

Normally, glimmer syntax inside HTML comment tags is not evaluated:

<!-- {{this.someProperty}} -->
<div>Hello World</div>

This is rendered out to the browser as:

<!-- {{this.someProperty}} -->
<div>Hello World</div>

Makes sense 👌

However, if the glimmer syntax inside the HTML comment is a block opening:

<!-- {{#if someCondition}} -->
<div>Hello World</div>
<!-- {{/if}} -->

Then the entire content of the block is made into an HTML comment. Here's a screenshot from the chrome dev tools:

This difference in behaviour between non-blocks and blocks is quite confusing. It's especially confusing because syntax highlighters do not indicate that <div>Hello World</div> is commented-out.

The 'best-practice' here is to use the handlebars comment syntax rather than HTML comments. However, HTML comments may be automatically inserted by badly-configured editors, or by people who are less familiar with Glimmer/HBS.

In discussions with @wycats, he suggested that changing the behaviour here in a backwards-compatible way would be difficult. However, it may be possible to make this 'open block in an HTML comment' an opt-in deprecation warning, or maybe even a syntax error.