Html Template tag screws up the handlebar tags

Question

Html Template tag screws up the handlebar tags

444 Views Asked by Payam V At 20 October 2024 at 19:46

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?)

Original Q&A

There are 1 best solutions below

**abraham** · Accepted Answer

template tag content is not ignored by browsers.

Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.

MDN

So the contents is parsed and validated. table elements have a specific list and order of permitted content. So when the template content is parsed the unsupported content is removed from the table.

You can see the same behavior if you use p tags within a table.

<template>                  
    <table>
        <p>
        <tr>                            
            <td>
                {{email}}
            </td>                           
            <td>
                {{phone}}
            </td>                           
        </tr>
        </p>
    </table>                    
</template>

An alternative approach would be to store the template in JavaScript and process it with Handlebars before inserting it into the DOM.

<script>                  
    const template = `<table>
        {{#each items}}
        <tr>                            
            <td>
                {{email}}
            </td>                           
            <td>
                {{phone}}
            </td>                           
        </tr>
        {{/each}}
    </table>`;
</script>

Html Template tag screws up the handlebar tags

There are 1 best solutions below

Related Questions in HTML

Related Questions in HANDLEBARS.JS

Related Questions in WEB-COMPONENT

Related Questions in HTML-TEMPLATES

Trending Questions

Popular # Hahtags

Popular Questions