Skip to content

refactor: set adoptedStyleSheets only once per component connection #9660

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
Merged
merged 3 commits into from
Jul 9, 2025
Merged

refactor: set adoptedStyleSheets only once per component connection #9660

merged 3 commits into from
Jul 9, 2025

Conversation

vursen
Copy link
Contributor

@vursen vursen commented Jul 8, 2025 •
edited
Loading

The PR refines LumoInjector to make it update adoptedStyleSheets only for the connecting component rather than all instances on the page when a new component connects. This results in a noticeable performance improvement on a page with 1000 instances of combo-box:

Before After
Screenshot 2025-07-08 at 15 46 51 Screenshot 2025-07-08 at 15 46 29
scripting ~ 8 sec 1 scripting ~ 2 sec 1 
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/packages/vaadin-lumo-styles/lumo.css" />

    <script type="module">
      import '@vaadin/combo-box';
      import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';

      const fragment = document.createDocumentFragment();

      Array.from({ length: 1000 }).forEach((_, i) => {
        const comboBox = document.createElement('vaadin-combo-box');
        comboBox.items = ['Item 0', 'Item 1', 'Item 2'];
        fragment.appendChild(comboBox);
      });

      document.body.appendChild(fragment);
    </script>
  </head>
  <body></body>
</html>

Part of #9082

Footnotes

  1. The benchmark was conducted with a 4x CPU slowdown ↩ ↩2

@vursen vursen force-pushed the optimize-lumo-injector branch from e9a33b0 to 200342c Compare July 8, 2025 11:40
@vursen vursen changed the title perf: set adoptedStyleSheets only once per component perf: set adoptedStyleSheets only once per component connection Jul 8, 2025
@vursen vursen force-pushed the optimize-lumo-injector branch from 200342c to def17cc Compare July 9, 2025 08:12
@vursen vursen changed the title perf: set adoptedStyleSheets only once per component connection refactor: set adoptedStyleSheets only once per component connection Jul 9, 2025
@sonarqubecloud SonarQubeCloud
Copy link

sonarqubecloud bot commented Jul 9, 2025

Quality Gate Passed Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@web-padawan web-padawan merged commit dc923df into main Jul 9, 2025
13 of 15 checks passed
@web-padawan web-padawan deleted the optimize-lumo-injector branch July 9, 2025 08:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@web-padawan web-padawan web-padawan approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@vursen @web-padawan