同学们，今天我们来讲讲 Lightning Web Components 的 HTML 模板文件里的一些硬性规定，别看是基础，但一不小心就会踩坑。
每个 LWC 组件都必须有一个 HTML 文件，这个文件就是组件的脸蛋。它的根标签必须是 `
`，而且整个文件的大小不能超过 128 KB。这个限制平时不太会碰到，除非你往里塞了一大坨内联样式或者乱七八糟的东西，心里有个数就行。
接下来重点说说嵌套 ``。如果你在根 `` 里面又放了 ``，那内层的这个模板标签就必须带上特定的指令，比如循环用的 `for:each`、`iterator`，或者条件渲染用的 `lwc:if`、`lwc:elseif`、`lwc:else`，还有老式的 `if:true` 和 `if:false`。最关键的是，这种嵌套的 `` 上不能加任何其他 HTML 属性，什么 `class`、`id`、`style` 统统不行。如果你真的需要加属性，很简单，在外面包一个 `` 或者 ``，把样式、类名写在这个包装器上，里面的 `` 只负责逻辑指令。框架这样设计是为了让渲染更干净高效。
还有一点，等到组件真正渲染到页面上的时候，`` 标签自己会消失，被你的组件自定义标签取代，最终用户看到的是你 `` 包裹里的真实内容。
说到自定义标签，在 HTML 里使用咱们的组件时，千万要写完整的闭合标签，比如 ``，不能偷懒写成 ``。因为根据 HTML 规范，自定义元素不属于空元素，必须显式结束。写自闭合虽然看起来简洁，但可能会引起解析问题。
最后推荐大家安装 VS Code 的 Salesforce Extension Pack 插件，它能实时标出模板里的格式错误，比如嵌套 template 用了不该用的属性，马上就会给你波浪线提示，省得部署之后才发现。
好啦，这几个规则记住了，你写起模板来就会顺手很多。下节我们接着聊。
关键词
LWC
Lightning Web Components
Salesforce