Html 模板标签搞砸了车把标签

Question

这是我的 html 具有 “现代” 网络组件模板：

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

这是我在浏览器（Chrome 和 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>

很明显，车把卷曲标签吊到了顶部。模板不应该保持内部数据完好无损以供将来渲染吗？那么我们是否只剩下使用 <script type="shame-on-html"> 而不是直观的 <template> 的唯一选择？

（请忽略这行：浏览器何时会更多地支持动态网页内容，React 的统治何时会结束？）

Answer 1

template标签内容不会被浏览器忽略。

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

所以内容被解析和验证。 table 元素具有特定的列表和顺序 permitted content。因此，当解析 template 内容时，将从 table.

中删除不受支持的内容

如果在 table.

中使用 p 标签，您会看到相同的行为

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

另一种方法是将模板存储在 JavaScript 中，并在将其插入 DOM.

之前使用 Handlebars 对其进行处理

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

Html 模板标签搞砸了车把标签

Html Template tag screws up the handlebar tags

html

web-component

handlebars.js

html-templates