chore: add method to force LumoInjector to update styles synchronously (#10588)

Author: vursen

packages/vaadin-themable-mixin/src/lumo-injector.js

@@ -97,6 +97,25 @@ export class LumoInjector {
     this.#componentsByTag.values().forEach((components) => components.forEach(removeLumoStyleSheet));
   }
 
+  /**
+   * Forces all monitored components to re-evaluate and update their
+   * injected styles.
+   *
+   * This method can be used to force LumoInjector to clean up component
+   * styles synchonously after the Lumo stylesheet has been removed from
+   * the root element.Without this, there may be a short FOUC, when the
+   * Lumo styles are already removed from the root but still present in
+   * the component Shadow DOMs, since those are removed asynchronously on
+   * `transitionstart` (CSSPropertyObserver). This is problematic for grid
+   * in particular, as that short period is enough to cause the virtualizer
+   * to create excessive rows (ResizeObserver).
+   */
+  forceUpdate() {
+    for (const tagName of this.#styleSheetsByTag.keys()) {
+      this.#updateStyleSheet(tagName);
+    }
+  }
+
   /**
    * Adds a component to the list of elements monitored for style injection.
    * If the styles have already been detected, they are injected into the

packages/vaadin-themable-mixin/test/lumo-injection-mixin.test.js

@@ -21,6 +21,7 @@ class TestFoo extends LumoInjectionMixin(ThemableMixin(LitElement)) {
 
       [part='content'] {
         transition: background-color 1ms linear;
+        color: black;
         background-color: yellow;
       }
     `;
@@ -97,6 +98,7 @@ const TEST_FOO_STYLES = `
 
   @media lumo_foo {
     [part='content'] {
+      color: red;
       background-color: green;
     }
   }
@@ -560,6 +562,35 @@ describe('Lumo injection', () => {
     });
   });
 
+  describe('forceUpdate', () => {
+    beforeEach(async () => {
+      element = fixtureSync('<test-foo></test-foo>');
+      await nextRender();
+      content = element.shadowRoot.querySelector('[part="content"]');
+    });
+
+    afterEach(() => {
+      document.__lumoInjector?.disconnect();
+      document.__lumoInjector = undefined;
+      document.__cssPropertyObserver?.disconnect();
+      document.__cssPropertyObserver = undefined;
+    });
+
+    it('should update component styles synchronously on forceUpdate', () => {
+      const style = document.createElement('style');
+      style.textContent = TEST_FOO_STYLES;
+      document.head.appendChild(style);
+
+      document.__lumoInjector.forceUpdate();
+      expect(getComputedStyle(content).color).to.equal('rgb(255, 0, 0)'); // red
+
+      style.remove();
+
+      document.__lumoInjector.forceUpdate();
+      expect(getComputedStyle(content).color).to.equal('rgb(0, 0, 0)'); // black
+    });
+  });
+
   describe('registerStyles', () => {
     let style;