Html Template tag screws up the handlebar tags

This is my html featuring "modern" web component template:

<html dir="ltr" lang="en-US">   
    <body>                  
                <template>                  
                    <table>
                        {{#each items}}
                        <tr>                            
                            <td>
                                {{email}}
                            </td>                           
                            <td>
                                {{phone}}
                            </td>                           
                        </tr>
                        {{/each}}
                    </table>                    
                </template>
    </body> 
</html>

Ans this is what I got in the browser (Chrome and Firefox):

<html dir="ltr" lang="en-US"><head></head><body>                    
                <template>                  
                    
                        {{#each items}}
                        
                        {{/each}}
                    <table><tbody><tr>                          
                            <td>
                                {{email}}
                            </td>                           
                            <td>
                                {{phone}}
                            </td>                           
                        </tr></tbody></table>                   
                </template>
        




</body></html>

As is clear, the handlebars curly tags are hoisted to the top. Are templates not supposed to keep the inner data intact for future rendering? Then are we left with the only option of using <script type="shame-on-html"> instead of intuitive <template>?

(Please ignore this line: When browser will support dynamic web content more, and when the reign of React will end?)