HTML Attribute Names — Rules & Special Cases

好，我们来看这一页的内容，聊聊 HTML 属性命名和 LWC 里一个挺巧妙的设计。 你有没有发现，在 HTML 里给元素加属性的时候，命名其实比 JavaScript 严格得多？比如你不能随便用大写字母开头，也不能包含某些特殊字符。HTML 属性的名字，本质上必须能直接写在标签里，所以规则就定得很死。 具体来说，合法的开头字符只能是大写字母、下划线或者美元符号。然后后面还可以跟连字符组合，比如常见的 data- 这种。有些特殊组合，像双下划线、下划线连字符、连字符下划线，在特定位置也是允许的，这些看起来有点怪，但确实是规范里允许的写法。 那问题来了，在 Lightning Web Components 里，我们的 JavaScript 属性有时候会以大写字母开头，比如你定义一个 @api 装饰的属性叫 Upper。如果直接把 “Upper” 塞进 HTML 属性里，是不符合规范的，因为属性名不能以大写字母开头。 LWC 想了个很巧妙的办法：它通过编译器做一个映射。当一个 JavaScript 属性名以大写字母开头时，就会把它转成带前导连字符的属性名。具体做法就是把首字母大写变小写，然后在前面加一个连字符。所以 @api Upper 最终在 HTML 里对应的属性就变成了 -upper。 这个“前导连字符”其实是一个信号，告诉模板编译器：“注意了，这个属性映射的是一个以大写字母开头的 JavaScript 属性。” 这样编译器就能正确处理，同时也没有违反 HTML 属性命名的规范。 你可以把它理解成一种翻译规则：把 JavaScript 里“不守规矩”的大写开头，穿上一件 HTML 认可的“连字符外衣”，既保住了语义，又合规合法。这就是 LWC 应对 HTML 命名限制的一个优雅实现。 所以这一页的核心，就是记住两点：HTML 属性命名很严谨，开头不能用大写；而 LWC 通过加连字符前缀的方式，把大写开头的 JS 属性安全地映射到了 HTML 中。好，这部分我们就讲到这里，有没有什么疑问？