Vaadin-flow:带有阴影根元素的自定义组件的Css样式表导入

Question

我创建了一个带有影子根元素的服务器端组件。是否可以为该阴影根目录中的元素导入样式表？CssImport注释不起作用，我也找不到类似的东西，可以吗？！

我可以创建一个静态字符串并添加一个元素，但是css文件导入会更好吗？！(当然，我可以在没有阴影根的情况下使用该组件，但问题是“是否有可能”.)

MyCustomComponent.java

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

            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 [part='caption'] {
    background-color: red;
}
:host [part='content'] {
    background-color: blue;
}

Answer 1

我很好奇，为什么您会希望流组件周围有一个影子根，因为它除了CSS封装之外并没有提供任何其他好处。

在本例中，带有@CssImport参数的themeFor注释不会对您有所帮助，因为这只适用于使用ThemableMixin (https://github.com/vaadin/vaadin-themable-mixin/)的Web组件。

我不确定是否可以使用流将css加载到阴影根中，但是只要您想要样式的所有元素都有part属性，就可以使用常规(非影子-dom)样式表来实现这一点，如下所示：

my-custom-component::part(caption) {
  color: red;
}

只要把它放在你的styles.css或任何你有你的应用程序的正常的全球css。