HTML Syntax Compatibility & Common Errors

同学们，今天我们来说一说 Lightning Web Components 里 HTML 合规性的一个关键点。听起来有点专业，但其实就是在写组件模板时，得守的一些规矩。如果没遵守，页面可能就报错，甚至白屏。所以这节课，我会用大白话，帮大家把这些容易踩的坑都理清楚。 先看第一个要点：在 HTML 模板的文字内容里——也就是文本节点里，千万别直接写“<”这个符号。因为 LWC 的模板解析器会把“<”当成 HTML 标签的开始，你一写，它就去后面找标签，结果找不到，就解析错误了。那需要表示小于的时候怎么办呢？直接用“>=”和“>”就行，它们在文本节点里完全没问题。记住，“<”这个符号，只能出现在引用属性里，比如你绑定一个属性的时候，表达式里面用“<”是可以的。比方说 `{a < b ? c : d}`，这种写在属性值的引号内就没问题。 第二个容易出错的，是属性里的复杂表达式。咱们在属性上用动态值，很多时候要写表达式。比如 `title={someValue}` 这个简单绑定，直接用花括号，引号都不需要。但一旦表达式中包含了计算，像加减乘除、三元运算，或者有空格，就必须给整个属性值加上引号。比如 `title="{obj.name + ' is here'}"`，如果漏了引号，解析器就懵了。所以呢，大家记住：简单的属性绑定，花括号就够了；复杂一点的，一定老老实实加引号。 再一个，HTML 实体，像 `&`、`<` 这些，在 LWC 模板的花括号表达式里是不会自动解码的。也就是说，你写 `{ '&' }` 输出的是字面上的 `&` 这几个字符，并不会变成 `&`。这一点和原生 HTML 不一样，得小心。 还有，要尽量避免在模板里写出看起来像 HTML 标签的文本，尤其是包含 “”`，解析器可能会误以为你要关闭标签，导致结构混乱。所以这类字符串最好处理一下再显示。 接下来我们总结一下常见错误，大家写代码的时候对照着检查。第一个高频错误：复杂属性表达式缺少引号。就像刚才说的，`data="{a: b}"` 如果忘写外面那层双引号，那就错了。第二个，文本节点里直接用了“<”，比如 `

5 < 10

`，应该改成 `5 < 10` 或者用 `>=` 和 `>` 来换一个方式表达。第三个，模板表达式里用了不该用的东西，比如 `this`、`new` 关键字，或者函数声明、块级箭头函数（就是带花括号的那种箭头函数），甚至是在箭头函数外面做赋值或者自增自减操作。LWC 模板表达式有自己的一套限制，它只允许很少量的运算逻辑，你不能在里面定义变量或执行多条语句。比如 `{ this.someMethod() }` 不行，直接写 `{someMethod()}` 就好。`{ items.map(item => {return item.name}) }` 也不行，得改成不带花括号的箭头函数：`{ items.map(item => item.name) }`。还有赋值，像 `{ count = 5 }` 或者 `{ count++ }`，这些统统都不允许。 最后，当表达式里少了括号、大括号，或者用错了运算符，LWC 会给出特定的错误信息。这些信息通常会直接提示你 “缺少括号” 或者 “意外的运算符”，所以遇到报错，仔细看看控制台，往往就能定位到问题。 好了，上面这些就是 LWC HTML 合规性的核心要点。简单回顾一下：文本里别用 `<`，用 `>=` 和 `>`；复杂属性要加引号；实体不解码；避免写 `