Vaadin Fusion如何为嵌套子组件正确设置part样式

原因说明 #

Vaadin 组件基于 Web Component 标准开发，所有组件内部的 DOM 都被 Shadow DOM 隔离，普通 CSS 选择器无法跨 Shadow DOM 边界选中内部元素，你之前使用的属性选择器[part="xxx"]只能选中当前 Shadow DOM 树内的元素，自然无法命中嵌套子组件的内部 part。

正确写法 #

Web Component 标准提供了::part()伪元素选择器，专门用来选中组件对外暴露的 part 属性，嵌套组件的 part 可以逐层叠加::part()实现穿透：

1. 如果样式写在全局主题文件（例如frontend/themes/你的主题名/styles.css）中，可直接选中嵌套子组件的 part：

vaadin-upload-file::part(name) {
  /* 你要设置的样式，比如修改字体颜色 */
  color: #2563eb;
  font-size: 14px;
}

2. 如果样式写在使用vaadin-upload的父组件的scoped样式块中，需要逐层穿透两层Shadow DOM（vaadin-upload的Shadow DOM → vaadin-upload-file的Shadow DOM）：

vaadin-upload::part(file)::part(name) {
  /* 自定义样式 */
  color: #2563eb;
  font-size: 14px;
}

说明：file是vaadin-upload对外暴露的part，对应内部每一个vaadin-upload-file实例，你可以直接基于这个part先选中嵌套的vaadin-upload-file，再指向它内部暴露的namepart。

扩展用法 #

如果需要结合状态调整样式，可以叠加伪类或者属性选择器，比如修改上传失败的文件名称样式：

vaadin-upload::part(file)[error]::part(name) {
  color: #dc2626;
  text-decoration: line-through;
}

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