refactor: make Lumo style injection tag name configurable (#10404)

vursen · web-flow · commit 35feee60f64c · 2025-10-30T08:55:34.000+04:00
diff --git a/packages/avatar/src/vaadin-avatar.js b/packages/avatar/src/vaadin-avatar.js
@@ -58,9 +58,7 @@ class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInj
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/card/src/vaadin-card.js b/packages/card/src/vaadin-card.js
@@ -62,9 +62,7 @@ class Card extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(Li
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   static get properties() {
diff --git a/packages/charts/src/vaadin-chart.js b/packages/charts/src/vaadin-chart.js
@@ -170,9 +170,7 @@ class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjec
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/dashboard/src/vaadin-dashboard-layout.js b/packages/dashboard/src/vaadin-dashboard-layout.js
@@ -73,9 +73,7 @@ class DashboardLayout extends DashboardLayoutMixin(
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -82,9 +82,7 @@ class DashboardSection extends DashboardItemMixin(
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   static get properties() {
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -116,9 +116,7 @@ class DashboardWidget extends DashboardItemMixin(
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   static get properties() {
diff --git a/packages/dashboard/src/vaadin-dashboard.js b/packages/dashboard/src/vaadin-dashboard.js
@@ -121,9 +121,7 @@ class Dashboard extends DashboardLayoutMixin(
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   static get properties() {
diff --git a/packages/date-picker/src/vaadin-date-picker-overlay-content.js b/packages/date-picker/src/vaadin-date-picker-overlay-content.js
@@ -34,9 +34,7 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/details/src/vaadin-details.js b/packages/details/src/vaadin-details.js
@@ -79,9 +79,7 @@ class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(L
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/form-layout/src/vaadin-form-item.js b/packages/form-layout/src/vaadin-form-item.js
@@ -102,9 +102,7 @@ class FormItem extends FormItemMixin(ThemableMixin(PolylitMixin(LumoInjectionMix
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/form-layout/src/vaadin-form-row.js b/packages/form-layout/src/vaadin-form-row.js
@@ -31,9 +31,7 @@ class FormRow extends ThemableMixin(PolylitMixin(LitElement)) {
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout.js b/packages/horizontal-layout/src/vaadin-horizontal-layout.js
@@ -61,9 +61,7 @@ class HorizontalLayout extends HorizontalLayoutMixin(
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/icon/src/vaadin-icon.js b/packages/icon/src/vaadin-icon.js
@@ -89,9 +89,7 @@ class Icon extends IconMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/map/src/vaadin-map.js b/packages/map/src/vaadin-map.js
@@ -71,9 +71,7 @@ class Map extends MapMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjection
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/message-list/src/vaadin-message.js b/packages/message-list/src/vaadin-message.js
@@ -58,9 +58,7 @@ class Message extends MessageMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoI
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/popover/src/vaadin-popover-overlay.js b/packages/popover/src/vaadin-popover-overlay.js
@@ -35,9 +35,7 @@ class PopoverOverlay extends PopoverOverlayMixin(
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor.js b/packages/rich-text-editor/src/vaadin-rich-text-editor.js
@@ -119,9 +119,7 @@ class RichTextEditor extends RichTextEditorMixin(
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/scroller/src/vaadin-scroller.js b/packages/scroller/src/vaadin-scroller.js
@@ -46,9 +46,7 @@ class Scroller extends ScrollerMixin(ElementMixin(ThemableMixin(PolylitMixin(Lum
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/split-layout/src/vaadin-split-layout.js b/packages/split-layout/src/vaadin-split-layout.js
@@ -166,9 +166,7 @@ class SplitLayout extends SplitLayoutMixin(ElementMixin(ThemableMixin(PolylitMix
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/upload/src/vaadin-upload-file.js b/packages/upload/src/vaadin-upload-file.js
@@ -62,9 +62,7 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/upload/src/vaadin-upload-icon.js b/packages/upload/src/vaadin-upload-icon.js
@@ -26,9 +26,7 @@ class UploadIcon extends ThemableMixin(LumoInjectionMixin(LitElement)) {
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */
diff --git a/packages/vaadin-themable-mixin/lumo-injection-mixin.js b/packages/vaadin-themable-mixin/lumo-injection-mixin.js
@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { LumoInjector } from './src/lumo-injector.js';
+import { getLumoInjectorPropName, LumoInjector } from './src/lumo-injector.js';
 
 /**
  * @type {Set<string>}
@@ -36,7 +36,7 @@ export const LumoInjectionMixin = (superClass) =>
     static finalize() {
       super.finalize();
 
-      const propName = this.lumoInjectPropName;
+      const propName = getLumoInjectorPropName(this.lumoInjector);
 
       // Prevent registering same property twice when a class extends
       // another class using this mixin, since `finalize()` is called
@@ -57,12 +57,9 @@ export const LumoInjectionMixin = (superClass) =>
       }
     }
 
-    static get lumoInjectPropName() {
-      return `--_lumo-${this.is}-inject`;
-    }
-
     static get lumoInjector() {
       return {
+        is: this.is,
         includeBaseStyles: false,
       };
     }
diff --git a/packages/vaadin-themable-mixin/src/lumo-injector.js b/packages/vaadin-themable-mixin/src/lumo-injector.js
@@ -7,6 +7,10 @@ import { CSSPropertyObserver } from './css-property-observer.js';
 import { injectLumoStyleSheet, removeLumoStyleSheet } from './css-utils.js';
 import { parseStyleSheets } from './lumo-modules.js';
 
+export function getLumoInjectorPropName(lumoInjector) {
+  return `--_lumo-${lumoInjector.is}-inject`;
+}
+
 /**
  * Implements auto-injection of CSS styles from document style sheets
  * into the Shadow DOM of corresponding Vaadin components.
@@ -103,7 +107,8 @@ export class LumoInjector {
    * @param {HTMLElement} component
    */
   componentConnected(component) {
-    const { is: tagName, lumoInjectPropName } = component.constructor;
+    const { lumoInjector } = component.constructor;
+    const { is: tagName } = lumoInjector;
 
     this.#componentsByTag.set(tagName, this.#componentsByTag.get(tagName) ?? new Set());
     this.#componentsByTag.get(tagName).add(component);
@@ -117,7 +122,9 @@ export class LumoInjector {
     }
 
     this.#initStyleSheet(tagName);
-    this.#cssPropertyObserver.observe(lumoInjectPropName);
+
+    const propName = getLumoInjectorPropName(lumoInjector);
+    this.#cssPropertyObserver.observe(propName);
   }
 
   /**
@@ -127,7 +134,7 @@ export class LumoInjector {
    * @param {HTMLElement} component
    */
   componentDisconnected(component) {
-    const { is: tagName } = component.constructor;
+    const { is: tagName } = component.constructor.lumoInjector;
     this.#componentsByTag.get(tagName)?.delete(component);
 
     removeLumoStyleSheet(component);
diff --git a/packages/vaadin-themable-mixin/test/lumo-injection-mixin.test.js b/packages/vaadin-themable-mixin/test/lumo-injection-mixin.test.js
@@ -27,9 +27,7 @@ class TestFoo extends LumoInjectionMixin(ThemableMixin(LitElement)) {
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   render() {
@@ -71,6 +69,26 @@ class TestBaz extends TestFoo {
 
 customElements.define(TestBaz.is, TestBaz);
 
+class TestCustomLumoInjectorTagName extends TestFoo {
+  static get is() {
+    return 'test-custom-lumo-injector-tag-name';
+  }
+
+  static get lumoInjector() {
+    return { ...super.lumoInjector, is: 'test-foo' };
+  }
+
+  static get version() {
+    return '1.0.0';
+  }
+
+  render() {
+    return html`<div part="content">Baz Content</div>`;
+  }
+}
+
+customElements.define(TestCustomLumoInjectorTagName.is, TestCustomLumoInjectorTagName);
+
 const TEST_FOO_STYLES = `
   html, :host {
     --_lumo-test-foo-inject: 1;
@@ -490,6 +508,35 @@ describe('Lumo injection', () => {
     });
   });
 
+  describe('custom tag name', () => {
+    beforeEach(async () => {
+      element = fixtureSync('<test-custom-lumo-injector-tag-name></test-custom-lumo-injector-tag-name>');
+      await nextRender();
+      content = element.shadowRoot.querySelector('[part="content"]');
+    });
+
+    afterEach(() => {
+      document.__lumoInjector?.disconnect();
+      document.__lumoInjector = undefined;
+      document.__cssPropertyObserver?.disconnect();
+      document.__cssPropertyObserver = undefined;
+    });
+
+    it('should inject matching styles for the extending component', async () => {
+      const style = document.createElement('style');
+      style.textContent = TEST_FOO_STYLES;
+      document.head.appendChild(style);
+
+      await contentTransition();
+      assertInjectedStyle();
+
+      style.remove();
+
+      await contentTransition();
+      assertBaseStyle();
+    });
+  });
+
   describe('registerStyles', () => {
     let style;
 
diff --git a/packages/vertical-layout/src/vaadin-vertical-layout.js b/packages/vertical-layout/src/vaadin-vertical-layout.js
@@ -47,9 +47,7 @@ class VerticalLayout extends ThemableMixin(ElementMixin(PolylitMixin(LumoInjecti
   }
 
   static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
+    return { ...super.lumoInjector, includeBaseStyles: true };
   }
 
   /** @protected */

Original file line number	Diff line number	Diff line change
`@@ -58,9 +58,7 @@ class Avatar extends AvatarMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInj`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`static get lumoInjector() {`
`61`		`- return {`
`62`		`- includeBaseStyles: true,`
`63`		`- };`
	`61`	`+ return { ...super.lumoInjector, includeBaseStyles: true };`
`64`	`62`	`}`
`65`	`63`
`66`	`64`	`/** @protected */`
Original file line number	Diff line number	Diff line change
`@@ -62,9 +62,7 @@ class Card extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(Li`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`static get lumoInjector() {`
`65`		`- return {`
`66`		`- includeBaseStyles: true,`
`67`		`- };`
	`65`	`+ return { ...super.lumoInjector, includeBaseStyles: true };`
`68`	`66`	`}`
`69`	`67`
`70`	`68`	`static get properties() {`
Original file line number	Diff line number	Diff line change
`@@ -170,9 +170,7 @@ class Chart extends ChartMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjec`
`170`	`170`	`}`
`171`	`171`
`172`	`172`	`static get lumoInjector() {`
`173`		`- return {`
`174`		`- includeBaseStyles: true,`
`175`		`- };`
	`173`	`+ return { ...super.lumoInjector, includeBaseStyles: true };`
`176`	`174`	`}`
`177`	`175`
`178`	`176`	`/** @protected */`
Original file line number	Diff line number	Diff line change
`@@ -73,9 +73,7 @@ class DashboardLayout extends DashboardLayoutMixin(`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`static get lumoInjector() {`
`76`		`- return {`
`77`		`- includeBaseStyles: true,`
`78`		`- };`
	`76`	`+ return { ...super.lumoInjector, includeBaseStyles: true };`
`79`	`77`	`}`
`80`	`78`
`81`	`79`	`/** @protected */`
Original file line number	Diff line number	Diff line change
`@@ -82,9 +82,7 @@ class DashboardSection extends DashboardItemMixin(`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`static get lumoInjector() {`
`85`		`- return {`
`86`		`- includeBaseStyles: true,`
`87`		`- };`
	`85`	`+ return { ...super.lumoInjector, includeBaseStyles: true };`
`88`	`86`	`}`
`89`	`87`
`90`	`88`	`static get properties() {`
Original file line number	Diff line number	Diff line change
`@@ -116,9 +116,7 @@ class DashboardWidget extends DashboardItemMixin(`
`116`	`116`	`}`
`117`	`117`
`118`	`118`	`static get lumoInjector() {`
`119`		`- return {`
`120`		`- includeBaseStyles: true,`
`121`		`- };`
	`119`	`+ return { ...super.lumoInjector, includeBaseStyles: true };`
`122`	`120`	`}`
`123`	`121`
`124`	`122`	`static get properties() {`
Original file line number	Diff line number	Diff line change
`@@ -121,9 +121,7 @@ class Dashboard extends DashboardLayoutMixin(`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`static get lumoInjector() {`
`124`		`- return {`
`125`		`- includeBaseStyles: true,`
`126`		`- };`
	`124`	`+ return { ...super.lumoInjector, includeBaseStyles: true };`
`127`	`125`	`}`
`128`	`126`
`129`	`127`	`static get properties() {`
Original file line number	Diff line number	Diff line change
`@@ -34,9 +34,7 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`static get lumoInjector() {`
`37`		`- return {`
`38`		`- includeBaseStyles: true,`
`39`		`- };`
	`37`	`+ return { ...super.lumoInjector, includeBaseStyles: true };`
`40`	`38`	`}`
`41`	`39`
`42`	`40`	`/** @protected */`
Original file line number	Diff line number	Diff line change
`@@ -79,9 +79,7 @@ class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(L`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`static get lumoInjector() {`
`82`		`- return {`
`83`		`- includeBaseStyles: true,`
`84`		`- };`
	`82`	`+ return { ...super.lumoInjector, includeBaseStyles: true };`
`85`	`83`	`}`
`86`	`84`
`87`	`85`	`/** @protected */`
Original file line number	Diff line number	Diff line change
`@@ -102,9 +102,7 @@ class FormItem extends FormItemMixin(ThemableMixin(PolylitMixin(LumoInjectionMix`
`102`	`102`	`}`
`103`	`103`
`104`	`104`	`static get lumoInjector() {`
`105`		`- return {`
`106`		`- includeBaseStyles: true,`
`107`		`- };`
	`105`	`+ return { ...super.lumoInjector, includeBaseStyles: true };`
`108`	`106`	`}`
`109`	`107`
`110`	`108`	`/** @protected */`