Vaadin 无法使@CssImport仅应用于组件范围

我已经浪费了数小时和数天的时间试图设计Vaadin上传组件。目标很简单：

• 有时我需要组件使用其内置的文件列表显示上载的文件，并允许删除
• 其他时候，我想隐藏此列表，因为我有另一个组件（如Grid）来显示文件详细信息

现在问题来了，我无法让它在使用@CssImport时始终与emor=vaadin upload和emor=vaadin upload文件一起工作。Vaadin似乎编译了shadowdom，最终的结果是不同的，它混合了两个选项，最后一个得到应用

然后我想可能是因为@CssImport在@Route组件中。因此，我创建了两个自定义上载组件，它们扩展了vaadin上载组件，不同之处在于@CssImport不同（见下文）。这（令人沮丧）仍然不起作用。我检查了文档，发现shadowdom内部包含了这两个元素，尽管我从未在同一页面上使用过这两个元素

@CssImport(value = "./css/vaadin-upload-show.css", themeFor = "vaadin-upload")
public class UploadShowFiles extends Upload {

    private static final long serialVersionUID = -9198630843136885092L;

    public UploadShowFiles(Receiver receiver) {
        super(receiver);
    }

}

@CssImport(value = "./css/vaadin-upload-hidefile.css", themeFor = "vaadin-upload")
public class UploadHideFiles extends Upload {

    private static final long serialVersionUID = 2344860066834705807L;

    public UploadHideFiles(Receiver receiver) {
        super(receiver);
        setClassName("hide-upload");
    }

}

下面的css将出现在阴影dom中。我只希望显示：不显示或不显示，而不是同时显示

[name="file-list"] {
    display: none !important;
    height: 0px !important;
}

[name="file-list"] div[part="file-list"] {
    display: none !important;
}

[name="file-list"] {
    display: block !important;
    height: 1.5rem !important;
}

[name="file-list"] div[part="file-list"] {
    display: block !important;
}

---

这是我第一次在项目中使用Vaadin，我可能再也不会使用它了。在Vaadin中定制任何东西都是非常耗时和痛苦的。

在阴影DOM中设置样式确实很棘手。Vaadin 19中的这个有点帮助

放置

@CssImport

注释的位置会影响CSS是否应包含在文档中，但不会影响它影响的组件。对于前面的

，它将始终应用于所有匹配的组件

您可以使用
：host
选择器限制其应用于哪些上载组件。在这里，我使用基于类的方法：

:host(.no-file-list) [name="file-list"] {
    display: none !important;
    height: 0px !important;
}

:host(.no-file-list) [name="file-list"] div[part="file-list"] {
    display: none !important;
}

然后，我可以通过添加一个类在上载组件中隐藏文件列表：

@Route
@CssImport(value = "./styles/upload-style.css", themeFor = "vaadin-upload")
public class FileUploadTest extends VerticalLayout {

    public FileUploadTest() {
        Upload uploadWithFileList = new Upload();
        Upload uploadWithoutFileList = new Upload();
        uploadWithoutFileList.addClassName("no-file-list");

        add(uploadWithFileList, uploadWithoutFileList);
    }
}

谢谢。这是我在stackoverflow上得到的最快、最正确、最直接的回应！