Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WebComponentExporter: @CSSImport styles are registered in the head #19700

Closed
roelnoten opened this issue Jul 17, 2024 · 5 comments · Fixed by #19740
Closed

WebComponentExporter: @CSSImport styles are registered in the head #19700

roelnoten opened this issue Jul 17, 2024 · 5 comments · Fixed by #19740
Assignees
@tltv
Labels
BFP Bugfix priority, also known as Warranty bug Impact: Low Released with Vaadin 23.5.4 Released with Vaadin 24.3.17 Released with Vaadin 24.4.9 Severity: Major

Comments

@roelnoten
Copy link

roelnoten commented Jul 17, 2024 •
edited
Loading

Description of the bug

When exposing a part of a vaadin application as a webcomponent via the WebComponentExporter, then all styles loaded via the java @CSSImport annotation (without themefor attribute) are registered in the head of the parent document instead of within the bounds of the webcomponent.
Not only does this leak styles in to the parent document and can thus alter it, it also leads to the absence of those styles in the webcomponent.

The issue can be circumvented by not using @CSSImport and instead importing the css files through @import statements in the themes styles.css file.
But, when using addons (form the vaadin addon directory) those typically also reference their styles via @CSSImport and thus their styling is missing when used in a WebComponentExporter.

Expected behavior

Styles loaded via @CSSImport should be registered within the webcomponent when running as a WebComponentExport webcomponent; and should not be registered in the head of the parent document.

Minimal reproducible example

Try for instance adding the addon <dependency><groupId>org.vaadin.tatu</groupId><artifactId>twincolselect</artifactId<version>2.5.2</version></dependency> to a WebComponentExporter.
This addon does a @CSSImport at https://github.com/TatuLund/TwinColSelect/blob/ec21083c1502ec8f150a603185be1f6151e45d9a/src/main/java/org/vaadin/tatu/TwinColSelect.java#L73 of https://github.com/TatuLund/TwinColSelect/blob/master/frontend/themes/mytheme/styles.css.

You'll notice these styles of that styles.css are registered in the head of the document and not active within the WebComponentExporter webcomponent.

Versions

  • Vaadin / Flow version: 23.3.34
  • Java version: any
  • OS version: any
  • Browser version (if applicable): any
  • Application Server (if applicable): any
  • IDE (if applicable): any
@mcollovati mcollovati added bug Impact: Low Severity: Major BFP Bugfix priority, also known as Warranty labels Jul 17, 2024
@mcollovati
Copy link
Collaborator

The issue was triaged and currently added to the backlog priority queue for further investigation

@mcollovati mcollovati self-assigned this Jul 19, 2024
@mcollovati
Copy link
Collaborator

The issue was assigned to a developer and is currently being investigated

@mcollovati mcollovati mentioned this issue Jul 25, 2024
Closed
@mcollovati mcollovati removed their assignment Jul 30, 2024
@tltv tltv self-assigned this Jul 31, 2024
tltv added a commit that referenced this issue Aug 1, 2024
@tltv
fix: apply CssImport to exported webcomponent
875ea0d 
Fixes: #19700
@tltv tltv mentioned this issue Aug 1, 2024
Merged
vaadin-bot pushed a commit that referenced this issue Aug 5, 2024
@tltv @mcollovati @vaadin-bot
fix: apply CssImport to exported webcomponent (#19740)
c3eba1f 
CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default.

Fixes: #19700

Co-authored-by: Marco Collovati <[email protected]>
vaadin-bot added a commit that referenced this issue Aug 5, 2024
@vaadin-bot @tltv @mcollovati
fix: apply CssImport to exported webcomponent (#19740) (#19745)
5c077f7 
CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default.

Fixes: #19700

Co-authored-by: Tomi Virtanen <[email protected]>
Co-authored-by: Marco Collovati <[email protected]>
tltv added a commit that referenced this issue Aug 5, 2024
@tltv @mcollovati
fix: apply CssImport to exported webcomponent (#19740)
983734e 
CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default.

Fixes: #19700

Co-authored-by: Marco Collovati <[email protected]>
@tltv tltv mentioned this issue Aug 5, 2024
Merged
mcollovati added a commit that referenced this issue Aug 6, 2024
@tltv @mcollovati
fix: apply CssImport to exported webcomponent (#19740) (CP: 24.3) (#1…
d26c7f8 
…9746)

CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default.

Fixes: #19700

Co-authored-by: Marco Collovati <[email protected]>
tltv added a commit that referenced this issue Aug 6, 2024
@tltv @mcollovati
fix: apply CssImport to exported webcomponent (#19740)
0d14f13 
CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default.

Fixes: #19700

Co-authored-by: Marco Collovati <[email protected]>
@tltv tltv mentioned this issue Aug 6, 2024
Merged
mcollovati pushed a commit that referenced this issue Aug 7, 2024
@tltv
fix: apply CssImport to exported webcomponent (#19740) (CP: 23.5) (#1…
4e199fe 
…9752)

CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default.

Fixes: #19700
@mshabarov mshabarov mentioned this issue Aug 7, 2024
Closed
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 23.5.4.

@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.3.17.

@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.4.9.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tltv tltv

Labels
BFP Bugfix priority, also known as Warranty bug Impact: Low Released with Vaadin 23.5.4 Released with Vaadin 24.3.17 Released with Vaadin 24.4.9 Severity: Major
Projects
Vaadin Flow bugs & maintenance (Vaadin 10+)
Status: ✅ Closed
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: apply CssImport to exported webcomponent vaadin/flow
4 participants
@tltv @mcollovati @roelnoten @vaadin-bot