Content of WebComponentExporter was moved to shadow-root in new vaadin version (CSS Styles not applied anymore)

[tagtraeumer]

Not sure if it is a bug or intended behavior.
Nevertheless it causes me a problem that I currently cannot solve so maybe there is a workaround that will work.

Description of the bug

I work on a spring boot project that initially used JSP as frontend. Vaadin is included using WebComponentExporter. It worked fine so far but after upgrading from vaadin 14.1.16 to 14.4.6 the vaadin content of the view - referenced by the custom JSP tag, created by the exporter - doesn't appear as a child of the said JSP tag anymore but is placed within the #shadow-root.

This has an influence on my css files that i include using the @Stylesheet Annotation on top of the vaadin view. Since all objects are now within the shadow-root the css doesn't apply to them anymore and everything is style-less. I also tried @CssImport using my custom JSP tag as themeFor but it didn't work either.

Minimal reproducible example

I created a running example project:
https://github.com/tagtraeumer/vaadin-issue-wcestyle

It contains all necessary files for this issue and uses the new vaadin version and the attempted solution using @CssImport
The url is http://localhost:8080/v/main

Expected behavior

Either the content is not outside of the #shadow-root and can access the @Stylesheet referenced css file and its styles, same as it happened in the older version, or the @CssImport works for the specified custom JSP tag.
I assume there is an easy solution for the second one and I couldn't get it running as intended.

Actual behavior

The styles are not applied either way.

Versions

• Vaadin / Flow version: 14.4.6
• Java version: 1.8
• OS version: Windows 10
• Browser version (if applicable): Tested in Chromium Edge
• Application Server (if applicable): Spring boot (dependencies see linked github project)
• IDE (if applicable): STS 4

[Legioth]

This does indeed look fishy, but I cannot right now say whether this change is intended or some kind of defect.

I reproduced the issue by changing the Vaadin version in pom.xml (and doing mvn clean + rm package-lock.json package.json in between).

The themeFor attribute only works with custom elements that use Vaadin's themable mixin, which is the case only for Vaadin's regular components (e.g. <vaadin-button>) but not for components exported from Flow. There might be some better mechanism available as well, but you can at least work around this by manually including a <style> tag (using the Element API) anywhere inside the shadow root and either including the CSS itself as the text of that element or using @import 'test.css'; and putting the CSS file as a static resource in src/main/resources/META-INF/resources/.

DOM with Vaadin 14.1.16

DOM with Vaadin 14.4.6

[denis-anisimov]

Hello, thanks for the report.
Unfortunately I can't understand the main problem in the ticket:

• is it about using shadow root for the exported web component
• or is it about styling
  ?

I can't say why 14.1 doesn't use shadow root for the exported components. May be this was a mistake.
But the intention was always to use this way exactly because of styling: web components styles should not leak to the page styles and vice versa.
Exported web component is a self-contained an self-closed component which should work in the same way regardless where it's used. So it should be styled by itself and global page styles should not affect anyhow the styles of the web component.
That was always the intention for web components functionality.

So :

• having the exported web component inside shadow root is the design decision
• styles from the global page won't affect the exported web component because it's in the shadow root.

We have this ticket for styling web components : #8564
But this functionality is done in the latest Flow .
Should I consider this ticket as a duplicate of #8564 or your issue is a different one ?

[tagtraeumer]

Hello, thanks for the report.
Unfortunately I can't understand the main problem in the ticket:

• is it about using shadow root for the exported web component
• or is it about styling
  ?

I can't say why 14.1 doesn't use shadow root for the exported components. May be this was a mistake.
But the intention was always to use this way exactly because of styling: web components styles should not leak to the page styles and vice versa.
Exported web component is a self-contained an self-closed component which should work in the same way regardless where it's used. So it should be styled by itself and global page styles should not affect anyhow the styles of the web component.
That was always the intention for web components functionality.

So :

• having the exported web component inside shadow root is the design decision
• styles from the global page won't affect the exported web component because it's in the shadow root.

We have this ticket for styling web components : #8564
But this functionality is done in the latest Flow .
Should I consider this ticket as a duplicate of #8564 or your issue is a different one ?

Hi and thanks for your both replies.

I understand if it's a design decision then i need to find a way to apply my styles to the exported web component, so it makes sense to declare my issue a duplicate of #8564

If i understand correctly, it seems - according to rolfsmeds - there will be coming a theming solution in V19. But the workaround also works for now, I will keep an eye open.

thanks !

[Legioth]

To summarize, this is indeed an intentional change that we failed to clearly mark as such in release notes. I'm terribly sorry about the confusion and extra investigation work it has caused for you. It's good to hear that you have found a workaround that you can use until the improvements planned for Vaadin 19 will become available.

I'm closing this as a duplicate-ish of #8564.