Why can't I use <template> as an angular2 component template?
<p><strong>Update</strong></p>

<p>Apparently when using <code>&lt;template&gt;</code> the reading of <code>innerHTML</code> will return all attributes in lower case. Angular2 will not understand <code>ngfor</code> or <code>ngif</code> as of this beta 9 version and throws error. <code>&lt;script&gt;</code> is treated as a text fragment rather than DOM, which means attributes stay as they are.</p>

<p>Here:
<a href="https://groups.google.com/forum/#!topic/angular/yz-XdYV2vYw" rel="nofollow">https://groups.google.com/forum/#!topic/angular/yz-XdYV2vYw</a></p>

<p><strong>Originial</strong></p>

<p>Taking the following html and angular2 beta 9 component:</p>

<p><strong>HTML CODE</strong></p>

<pre><code>&lt;my-page&gt;Loading...&lt;/my-page&gt;

&lt;script type="text/html" id="my-component-template1"&gt;
    &lt;select [(ngModel)]="SelectedType"&gt;
        &lt;option *ngFor="#someType of MyTypes" [selected]="SelectedType == someType" [value]="someType"&gt;{{someType}}&lt;/option&gt;
    &lt;/select&gt;
&lt;/script&gt;

&lt;template id="my-component-template2"&gt;
    &lt;select [(ngModel)]="SelectedType"&gt;
        &lt;option *ngFor="#someType of MyTypes" [selected]="SelectedType == someType" [value]="someType"&gt;{{someType}}&lt;/option&gt;
    &lt;/select&gt;
&lt;/template&gt;
</code></pre>

<p><strong>JS CODE</strong></p>

<pre><code>    var myComponent =
        ng.core.Component({
            selector: 'my-page',

            //complains if i use #my-component-template2
            template: document.querySelector('#my-component-template1').innerHTML 
        })
        .Class({
            constructor: function () {
                var self = this;

                self.MyTypes = ['first', 'second'];
                self.SelectedType = self.MyTypes[0];
            }
        });

    document.addEventListener('DOMContentLoaded', function () {
        ng.platform.browser.bootstrap(myComponent);
    });
</code></pre>

<p>If i use <code>my-component-template1</code> it works fine, but if i choose <code>my-component-template2</code> it complains that <code>ngModel</code> and <code>ngForOf</code> are not a known native properties.</p>

<p>I tested a <code>div</code> as a template and apparently that won't work either with the same errors. So question is, why is it breaking if the template is part of the DOM? Furthermore, I really don't want to use the <code>script text/html</code> hack. Assuming this is why <code>&lt;template&gt;</code> was added in html5 specification. Why is this happening and how can i fix it?</p>