Vaadin Flow：为带Shadow Root的自定义组件导入CSS样式表

针对Vaadin服务端组件带Shadow Root的场景，可以实现导入外部CSS文件，但@CssImport注解之所以失效，是因为它会把样式注入到主页面的<head>中，而Shadow Root有独立的DOM作用域，主文档的样式无法穿透这个隔离层影响内部元素。

下面是具体的实现方法：

直接在Shadow Root中添加样式链接 #

在初始化Shadow Root时，手动创建一个<link>元素指向你的CSS文件，将其添加到Shadow Root内部，这样样式会被加载到Shadow Root的作用域内，仅对内部元素生效。

修改后的MyCustomComponent.java代码：

@Tag("my-custom-component")
public class MyCustomComponent extends Component {
    
    public MyCustomComponent() {
        super();
        ShadowRoot shadow = getElement().attachShadow();

        // 引入外部CSS文件到Shadow Root
        Element styleLink = new Element("link");
        styleLink.setAttribute("rel", "stylesheet");
        styleLink.setAttribute("href", "./components/my-custom-component.css");
        shadow.appendChild(styleLink);

        Span span = new Span();
        span.getElement().setAttribute("part", "caption");

        Div div = new Div();
        div.getElement().setAttribute("part", "content");
        
        shadow.appendChild(span.getElement());
        shadow.appendChild(div.getElement());
    }
}

你的my-custom-component.css无需修改，里面的:host会匹配<my-custom-component>宿主元素，内部的属性选择器可以正确选中Shadow Root里的子元素：

:host [part='caption'] {
    background-color: red;
}
:host [part='content'] {
    background-color: blue;
}

补充说明 #

• 注意CSS文件的路径要正确，确保相对于应用的部署路径可访问；
• 如果你偏好使用@CssImport，也可以通过定义CSS变量的方式间接传递样式，但这种方式不如直接在Shadow Root中引入样式直观，适合需要全局共享样式变量的场景。

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