Ember/Handlebars组件中class与classNames的区别及使用风险
class vs classNames传递样式类 Great question! Let's break down the differences between these two approaches, and highlight any potential gotchas you might run into:
1. 关于class的作用
当你在组件调用时写{{example-component class="example-class"}}，本质是在使用标准HTML属性逻辑。Ember有个内置的「属性转发」机制：所有组件未显式声明接收的HTML属性，都会自动应用到组件的根DOM元素上。
这意味着class的行为和普通HTML元素完全一致——它就是个纯HTML类名，会直接附加到组件的顶层元素上，不需要组件做任何额外处理。
2. 关于classNames的作用
classNames是Ember专属的API，专门用于定义组件的默认或组件管理的类名。通常我们会在组件类文件里配置它（比如经典组件里写classNames: ['base-component-style']，Glimmer组件里用@classNames）。
如果你在模板里传递classNames="example-class"，相当于修改这个组件管理的类名列表。Ember会把这个值和组件类里定义的classNames合并：比如组件类里有classNames: ['base-style']，再加上模板传递的classNames="example-class"，最终根元素会同时拥有base-style和example-class两个类。
3. 可能遇到的意外情况
大部分场景下两种写法都能生效，但有几个边缘情况需要注意：
- 组件自定义处理：如果组件显式接管了
class属性的逻辑（比如把它绑定到内部嵌套元素而非根元素），那你传递的class就不会作用在根元素上。但classNames始终会指向根元素（除非组件完全重写了classNames的处理逻辑）。 - 旧版Ember兼容性：在Ember 2.x及更早版本中，属性转发不是自动的——你需要在组件模板里显式绑定
class={{attrs.class}}才能让class生效。而classNames在旧版本里是稳定可用的。 - 代码可读性问题：在模板里用
classNames传递外部类名不符合常规HTML习惯，其他Ember开发者会默认认为外部类应该用class传递，这种写法会增加代码的理解成本。
推荐用法
传递外部样式类时优先用class——它符合直觉、和标准HTML写法一致，还能避免混淆。classNames更适合在组件类内部定义默认样式，作为组件基础样式的一部分。
内容的提问来源于stack exchange，提问作者Mike Hearn
