refactor: allow reusing CSSPropertyObserver instance for a style root (#10383)

Author: sissbruecker

packages/vaadin-themable-mixin/src/css-property-observer.js

@@ -9,23 +9,22 @@
  *
  * @private
  */
-export class CSSPropertyObserver {
+export class CSSPropertyObserver extends EventTarget {
   #root;
-  #callback;
   #properties = new Set();
   #styleSheet;
   #isConnected = false;
 
-  constructor(root, callback) {
+  constructor(root) {
+    super();
     this.#root = root;
-    this.#callback = callback;
     this.#styleSheet = new CSSStyleSheet();
   }
 
   #handleTransitionEvent(event) {
     const { propertyName } = event;
     if (this.#properties.has(propertyName)) {
-      this.#callback(propertyName);
+      this.dispatchEvent(new CustomEvent('property-changed', { detail: { propertyName } }));
     }
   }
 
@@ -78,4 +77,14 @@ export class CSSPropertyObserver {
   get #rootHost() {
     return this.#root.documentElement ?? this.#root.host;
   }
+
+  /**
+   * Gets or creates the CSSPropertyObserver for the given root.
+   * @param {DocumentOrShadowRoot} root
+   * @returns {CSSPropertyObserver}
+   */
+  static for(root) {
+    root.__cssPropertyObserver ||= new CSSPropertyObserver(root);
+    return root.__cssPropertyObserver;
+  }
 }

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

@@ -82,14 +82,13 @@ export class LumoInjector {
 
   constructor(root = document) {
     this.#root = root;
-    this.#cssPropertyObserver = new CSSPropertyObserver(this.#root, (propertyName) => {
-      const tagName = propertyName.match(/^--_lumo-(.*)-inject$/u)?.[1];
-      this.#updateStyleSheet(tagName);
-    });
+    this.handlePropertyChange = this.handlePropertyChange.bind(this);
+    this.#cssPropertyObserver = CSSPropertyObserver.for(root);
+    this.#cssPropertyObserver.addEventListener('property-changed', this.handlePropertyChange);
   }
 
   disconnect() {
-    this.#cssPropertyObserver.disconnect();
+    this.#cssPropertyObserver.removeEventListener('property-changed', this.handlePropertyChange);
     this.#styleSheetsByTag.clear();
     this.#componentsByTag.values().forEach((components) => components.forEach(removeLumoStyleSheet));
   }
@@ -134,6 +133,14 @@ export class LumoInjector {
     removeLumoStyleSheet(component);
   }
 
+  handlePropertyChange(event) {
+    const { propertyName } = event.detail;
+    const tagName = propertyName.match(/^--_lumo-(.*)-inject$/u)?.[1];
+    if (tagName) {
+      this.#updateStyleSheet(tagName);
+    }
+  }
+
   #initStyleSheet(tagName) {
     this.#styleSheetsByTag.set(tagName, new CSSStyleSheet());
     this.#updateStyleSheet(tagName);

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

@@ -120,6 +120,8 @@ describe('Lumo injection', () => {
     afterEach(() => {
       document.__lumoInjector?.disconnect();
       document.__lumoInjector = undefined;
+      document.__cssPropertyObserver?.disconnect();
+      document.__cssPropertyObserver = undefined;
     });
 
     describe('styles added after element is connected', () => {
@@ -245,6 +247,8 @@ describe('Lumo injection', () => {
     afterEach(() => {
       host.__lumoInjector?.disconnect();
       host.__lumoInjector = undefined;
+      host.__cssPropertyObserver?.disconnect();
+      host.__cssPropertyObserver = undefined;
     });
 
     describe('styles added after element is connected', () => {
@@ -426,6 +430,8 @@ describe('Lumo injection', () => {
     afterEach(() => {
       host.__lumoInjector?.disconnect();
       host.__lumoInjector = undefined;
+      host.__cssPropertyObserver?.disconnect();
+      host.__cssPropertyObserver = undefined;
     });
 
     it('should inject matching styles added to parent shadow host', async () => {
@@ -465,6 +471,8 @@ describe('Lumo injection', () => {
     afterEach(() => {
       document.__lumoInjector?.disconnect();
       document.__lumoInjector = undefined;
+      document.__cssPropertyObserver?.disconnect();
+      document.__cssPropertyObserver = undefined;
     });
 
     it('should inject matching styles for the extending component', async () => {
@@ -505,6 +513,8 @@ describe('Lumo injection', () => {
       style.remove();
       document.__lumoInjector?.disconnect();
       document.__lumoInjector = undefined;
+      document.__cssPropertyObserver?.disconnect();
+      document.__cssPropertyObserver = undefined;
     });
 
     it('should not remove styles from injected stylesheets when calling registerStyles()', () => {