Allow scoping a @CssImport to the given component class

[Artur-]

Given

Dashboard.java:

@CssImport("dashboard.css")
public class Dashboard extends Div {
}

OtherView.java

public class OtherView extends Div {
  public OtherView() {
    add(new Chart());
  }

dashboard.css

vaadin-chart {
    height: 200px;
}

It would be beneficial to be able to set the scope of @CssImport("dashboard.css") to only be used for Dashboard so that the charts on OtherView would not be affected.

With templates, this comes out of the box as a template defines a shadow root and you can define the view specific styles inside that shadow root and avoid leakage.

When using Java, it is not that easy. Adding a class name to the view and prefixing all CSS styles, or using BEM is extra work. As the CSS is included in the bundle anyway, it feels like this could be handled automatically.

[ujoni]

I guess Implement @Chunk #5537 would be one approach for this. Though @Legioth did float an idea about micro-chunks, which would also cover this iirc.

[Artur-]

This is not about loading the css though but how the contents are used

[Legioth]

Only relying on @Chunk without also doing something to the content would make the matter worse since chunks are not unloaded. This would mean that the visual appearance of OtherView would be different depending on whether the user has previously navigated to Dashboard in the same browser tab.

[ujoni]

Ah yes. I see now.

Then I hoped that

@Tag("my-tag")
@CssImport(value = "./styles/my-style.css", themeFor="my-tag")
public class MyTaggedComponent extends VerticalLayout {

would magically work. Of course it does not, but something that would work seems like a sensible addition.