Property and Attribute Names

同学们，我们这一页要聊的是LWC组件里属性的命名约定和一些关键的规则。别看只是命名，这里面要是搞错了，组件可能就渲染不正常，或者你写的代码不生效。咱们慢慢梳理一下。 首先，最核心的一个规则是：JavaScript里面我们写属性名，用的都是驼峰式，也就是camelCase，比如 `myProperty` 这种形式。但是在HTML模板里引用这个属性的时候，必须转换成短横线分隔的形式，也就是kebab-case，变成 `my-property`。举个例子，你在 JS 里定义了一个叫 `accountName` 的公开属性，那么HTML里就得写成 ``。这是框架自动帮我们做映射的，但你必须遵守这个规律，否则绑定不上。 接下来，有些开头的词，是专门留给平台用的，你不能随便用。以 `on` 开头的属性，会被当作事件监听器处理；以 `aria` 开头的，是给无障碍访问用的ARIA属性；以 `data` 开头的，会变成自定义数据属性。所以，你自己的属性名千万别用这些前缀，比如别定义一个叫 `onclickHandler` 的公开属性，那样会引起冲突。 还有几个词是完全被保留的，无论你放在哪里，都不能作为公开属性名。它们是 `slot`、`part` 和 `is`。这几个词有特殊的框架语义，比如 `slot` 是做插槽分发用的，`part` 是影子DOM的样式穿透，`is` 在自定义元素规范里有特殊含义。所以你绝对不能把公开属性起名叫 `is`，这不行。 再说HTML属性名称本身，它有一套自己的规则。特别要注意的是，如果你用一个以单个大写字母开头的属性名，比如 `MyProp`，浏览器在处理时会把它自动转成全小写，但在标准DOM里，它实际上会被映射成一个特殊的形式。框架要求所有HTML属性名只能包含小写字母、数字、连字符和下划线，而且不能以数字开头。所以最稳的做法就是全部用小写的kebab-case，别用大写字母，这样可以避免很多奇怪的行为。 最后，我们还会谈到如何在JavaScript里正确访问HTML全局属性和ARIA属性。比如，HTML里的 `class` 属性，在JS里访问时不能用 `class`，因为那是保留字，你得用 `className`。类似的，`for` 属性要转换成 `htmlFor`。ARIA属性呢，比如HTML里写的是 `aria-label`，在JS里要通过 `ariaLabel` 来访问，也就是去掉了短横线，变成驼峰式。这些映射你一定要心中有数，不然在代码里动态设置属性时就会出错。 总结一下，记住这几点：JS用驼峰，HTML用连字符；避开保留前缀和保留词；属性名全小写，安全又可靠；访问全局和ARIA属性时注意驼峰映射。这样就为你构建出健壮的LWC组件打下扎实的基础了。我们接下来可以看几个实际的例子，加深一下印象。