如何在Vaadin 8中以声明式方式指定CSS类名？

首先得明确：你遇到的问题是因为Vaadin的声明式HTML语法中，原生class属性和Java组件的styleName不是直接绑定的。直接在<v-label>上写class="large"，Vaadin不会把这个类名关联到Java的Label实例上，自然渲染后不会保留。

要对应Java API里的addStyleName("large")效果，你需要用Vaadin声明式语法专门的class-name属性，而不是原生的class：

<v-label class-name="large">This is a test label</v-label>

原理说明 #

• 原生class属性：作用于模板文件中的DOM元素本身，不会传递给绑定的Java组件实例，所以Vaadin的组件渲染逻辑不会把它加到最终的组件DOM上。
• class-name属性：这是Vaadin声明式语法专门用来映射Java组件addStyleName()方法的属性，设置后，Vaadin会自动在对应的组件实例上调用添加样式类的方法，最终渲染的DOM元素就会带上你指定的large类名。

如果是使用Vaadin Flow的Lit模板（较新版本），你也可以在模板的根元素上直接用class，但前提是组件的根DOM就是模板元素，不过用class-name是更通用、更贴合Java API逻辑的做法，适配所有Vaadin版本的声明式场景。

内容的提问来源于stack exchange，提问作者sirain