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

Lumo styles leak to the host page when embedding Vaadin component #12704

Closed
mstahv opened this issue Jan 12, 2022 · 13 comments · Fixed by #19221 or #19274
Closed

Lumo styles leak to the host page when embedding Vaadin component #12704

mstahv opened this issue Jan 12, 2022 · 13 comments · Fixed by #19221 or #19274
Assignees
@mcollovati
Labels
BFP Bugfix priority, also known as Warranty bug embedding flow Issues for embedding Flow applications Impact: Low prerelease version for Vaadin 24.4.0 prerelease version for Vaadin 24.5.0 Released with Vaadin 23.3.34 Released with Vaadin 23.4.1 Released with Vaadin 23.5.1 Released with Vaadin 24.3.11 Released with Vaadin 24.4.0.alpha24 Released with Vaadin 24.5.0.alpha1 Severity: Major

Comments

@mstahv
Copy link
Member

mstahv commented Jan 12, 2022

Description of the bug

When I embed a Vaadin application, its styles are applied also to parts that don't belong to the embedded application.

Expected behavior

The other parts of the application are not affected by the embedded application.

Minimal reproducible example

Check out this project, deploy and navigate to basic.html file. You'll see that the H1 header from the host page changes font once the Vaadin app gets loaded.

Versions

  • Vaadin / Flow version: 22.0.2
  • Java version: 17
  • OS version: mac
  • Browser version (if applicable): Chrome
  • Application Server (if applicable): Tomcat
  • IDE (if applicable): Eclipse
@caalador caalador added the bug label Jan 12, 2022
@caalador
Copy link
Contributor

caalador commented Jan 12, 2022 •
edited
Loading

Noted that if you use a custom theme on the embedded component then lumo doesn't leak to the host page.
EDIT: it worked this way in v14, but in v22 it seems it leaks with the custom theme also

@caalador caalador added embedding flow Issues for embedding Flow applications Impact: Low Severity: Minor labels Jan 12, 2022
@mstahv
Copy link
Member Author

mstahv commented Jan 12, 2022

@caalador I don't really agree with your severity label. This basically prevents embedding Vaadin apps without major changes in the host page CSS (which might be close to impossible in many cases).

@mstahv
Copy link
Member Author

mstahv commented Jan 12, 2022

The custom theme workaround would be ok if that was documented.

@caalador
Copy link
Contributor

Minor label was as it seemed to not affect if using the custom theme, but v22 didn't play the same game on that as v14 did.

@caalador caalador changed the title Lume styles leak to the host page when embedding Vaadin component Lumo styles leak to the host page when embedding Vaadin component Jan 13, 2022
@TatuLund
Copy link
Contributor

I think this should be cross checked: #16083

@mlopezFC
Copy link
Collaborator

I was able to reproduce this issue in latest 24 and in 23.4 versions, I'm attaching sample projects.

embedded-leak-vaadin-23.4.zip
embedded-leak-vaadin-24.zip

In both of them you can see that the ExampleServlet is generating a plain html:

  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse response)
      throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");

    try (PrintWriter out = response.getWriter()) {
      out.println("<!DOCTYPE html>");
      out.println("<html><head>");
      out.println("<meta http-equiv='Content-Type' content='text/html; " + "charset=UTF-8'>");

      out.println("<h1>Hello</h1>");
      out.println("<exported-component></exported-component>");
      out.println("<script type='module' src='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/web-component/exported-component.js'></script>");

      out.println("</body>");
      out.println("</html>");
    }
  }
}

But then the page, the head tag is populated with a lot of things from vaadin:

image

@mshabarov mshabarov added the BFP Bugfix priority, also known as Warranty label Apr 11, 2024
@mcollovati mcollovati self-assigned this Apr 19, 2024
@mcollovati
Copy link
Collaborator

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

mcollovati added a commit that referenced this issue Apr 22, 2024
@mcollovati
fix: prevent embedded styles to leak main document
e6cb849 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704
@mcollovati mcollovati mentioned this issue Apr 22, 2024
Merged
mshabarov pushed a commit that referenced this issue Apr 24, 2024
@mcollovati
fix: prevent embedded styles to leak main document (#19221)
31e2cb5 
* fix: prevent embedded styles to leak main document

When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704

* apply review suggestions
vaadin-bot pushed a commit that referenced this issue Apr 24, 2024
@mcollovati @vaadin-bot
fix: prevent embedded styles to leak main document (#19221)
da52793 
* fix: prevent embedded styles to leak main document

When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704

* apply review suggestions
vaadin-bot added a commit that referenced this issue Apr 24, 2024
@vaadin-bot @mcollovati
fix: prevent embedded styles to leak main document (#19221) (#19239)
4ec5f24 
* fix: prevent embedded styles to leak main document

When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704

* apply review suggestions

Co-authored-by: Marco Collovati <[email protected]>
mcollovati added a commit that referenced this issue Apr 24, 2024
@mcollovati
fix: prevent embedded styles to leak main document
d8a8d80 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704
@mcollovati mcollovati mentioned this issue Apr 24, 2024
Merged
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.4.0.alpha24 and is also targeting the upcoming stable 24.4.0 version.

tltv pushed a commit that referenced this issue Apr 25, 2024
@mcollovati
fix: prevent embedded styles to leak main document (#19242)
1a7635d 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704
ZheSun88 pushed a commit that referenced this issue Apr 25, 2024
@mcollovati @ZheSun88
fix: prevent embedded styles to leak main document (#19242)
9d001d8 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704
ZheSun88 pushed a commit that referenced this issue Apr 25, 2024
@mcollovati @ZheSun88
fix: prevent embedded styles to leak main document (#19242)
8f90036 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704
vaadin-bot added a commit that referenced this issue Apr 25, 2024
@vaadin-bot @mcollovati
fix: prevent embedded styles to leak main document (#19242) (#19248)
c9d52b5 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704

Co-authored-by: Marco Collovati <[email protected]>
mshabarov pushed a commit that referenced this issue Apr 26, 2024
@vaadin-bot @mcollovati
fix: prevent embedded styles to leak main document (#19242) (#19249)
1c25fcf 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704

Co-authored-by: Marco Collovati <[email protected]>
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 23.3.34.

mcollovati added a commit that referenced this issue Apr 29, 2024
@mcollovati
fix: prevent embedded styles to leak main document
d484370 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704
Fixes #19265
@mcollovati mcollovati mentioned this issue Apr 29, 2024
Merged
mcollovati added a commit that referenced this issue May 2, 2024
@mcollovati
fix: prevent embedded styles to leak main document (#19274)
f0890b4 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704
Fixes #19265
mcollovati added a commit that referenced this issue May 2, 2024
@mcollovati
fix: prevent embedded styles to leak main document (#19274)
8ee5e87 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704
Fixes #19265
@mcollovati mcollovati mentioned this issue May 2, 2024
Merged
mcollovati added a commit that referenced this issue May 3, 2024
@mcollovati
fix: prevent embedded styles to leak main document (#19274) (#19293)
cc1e1be 
When using an exported a themed Flow web-component, Lumo style may leak
the embedding document, causing invalid CSS rules to be applied.
This change prevents applying Lumo global imports when the theme is
applied to a web-component.

Fixes #12704
Fixes #19265
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.3.11.

@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 23.4.1.

@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 23.5.1.

@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.5.0.alpha1 and is also targeting the upcoming stable 24.5.0 version.

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

@mcollovati mcollovati

Labels
BFP Bugfix priority, also known as Warranty bug embedding flow Issues for embedding Flow applications Impact: Low prerelease version for Vaadin 24.4.0 prerelease version for Vaadin 24.5.0 Released with Vaadin 23.3.34 Released with Vaadin 23.4.1 Released with Vaadin 23.5.1 Released with Vaadin 24.3.11 Released with Vaadin 24.4.0.alpha24 Released with Vaadin 24.5.0.alpha1 Severity: Major
Projects
Vaadin Flow bugs & maintenance (Vaadin 10+)
Status: ✅ Closed
Vaadin Flow ongoing work (Vaadin 10+)
Archived in project
Milestone
No milestone
7 participants
@mstahv @caalador @mcollovati @TatuLund @vaadin-bot @mlopezFC @mshabarov