diff --git a/packages/vaadin-lumo-styles/badge-global.js b/packages/vaadin-lumo-styles/badge-global.js
new file mode 100644
index 0000000000..6cd8cc2360
--- /dev/null
+++ b/packages/vaadin-lumo-styles/badge-global.js
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { badge } from './badge.js';
+import { addLumoGlobalStyles } from './global.js';
+
+addLumoGlobalStyles('badge', badge);
diff --git a/packages/vaadin-lumo-styles/color-global.js b/packages/vaadin-lumo-styles/color-global.js
new file mode 100644
index 0000000000..e3a00f4ccf
--- /dev/null
+++ b/packages/vaadin-lumo-styles/color-global.js
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { color } from './color.js';
+import { addLumoGlobalStyles } from './global.js';
+
+addLumoGlobalStyles('color', color);
diff --git a/packages/vaadin-lumo-styles/color.js b/packages/vaadin-lumo-styles/color.js
index 15ca61a966..0851bb74e2 100644
--- a/packages/vaadin-lumo-styles/color.js
+++ b/packages/vaadin-lumo-styles/color.js
@@ -5,6 +5,7 @@
*/
import './version.js';
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
const colorBase = css`
:host {
@@ -80,9 +81,7 @@ const colorBase = css`
}
`;
-const $tpl = document.createElement('template');
-$tpl.innerHTML = ``;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('color-props', colorBase);
const color = css`
[theme~='dark'] {
diff --git a/packages/vaadin-lumo-styles/global.js b/packages/vaadin-lumo-styles/global.js
new file mode 100644
index 0000000000..42ea89fb9a
--- /dev/null
+++ b/packages/vaadin-lumo-styles/global.js
@@ -0,0 +1,12 @@
+const prefix = 'lumo-';
+
+export const addLumoGlobalStyles = (id, ...styles) => {
+ const styleTag = document.createElement('style');
+ styleTag.id = `${prefix}${id}`;
+ styleTag.textContent = styles
+ .map((style) => style.toString())
+ .join('\n')
+ .replace(':host', 'html');
+
+ document.head.insertAdjacentElement('afterbegin', styleTag);
+};
diff --git a/packages/vaadin-lumo-styles/sizing.js b/packages/vaadin-lumo-styles/sizing.js
index 9703f2c299..9b55a28ca2 100644
--- a/packages/vaadin-lumo-styles/sizing.js
+++ b/packages/vaadin-lumo-styles/sizing.js
@@ -5,6 +5,7 @@
*/
import './version.js';
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
const sizing = css`
:host {
@@ -23,8 +24,6 @@ const sizing = css`
}
`;
-const $tpl = document.createElement('template');
-$tpl.innerHTML = ``;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('sizing-props', sizing);
export { sizing };
diff --git a/packages/vaadin-lumo-styles/spacing.js b/packages/vaadin-lumo-styles/spacing.js
index e5541dc7af..e1d98d6db3 100644
--- a/packages/vaadin-lumo-styles/spacing.js
+++ b/packages/vaadin-lumo-styles/spacing.js
@@ -5,6 +5,7 @@
*/
import './version.js';
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
const spacing = css`
:host {
@@ -31,8 +32,6 @@ const spacing = css`
}
`;
-const $tpl = document.createElement('template');
-$tpl.innerHTML = ``;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('spacing-props', spacing);
export { spacing };
diff --git a/packages/vaadin-lumo-styles/style.js b/packages/vaadin-lumo-styles/style.js
index a6d4c390c2..cf3b96c39e 100644
--- a/packages/vaadin-lumo-styles/style.js
+++ b/packages/vaadin-lumo-styles/style.js
@@ -5,6 +5,7 @@
*/
import './version.js';
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
const style = css`
:host {
@@ -36,8 +37,6 @@ const globals = css`
}
`;
-const $tpl = document.createElement('template');
-$tpl.innerHTML = ``;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('style-props', style);
export { globals, style };
diff --git a/packages/vaadin-lumo-styles/test/visual/badge.test.js b/packages/vaadin-lumo-styles/test/visual/badge.test.js
index 15df3f91e5..c6be4ebbec 100644
--- a/packages/vaadin-lumo-styles/test/visual/badge.test.js
+++ b/packages/vaadin-lumo-styles/test/visual/badge.test.js
@@ -1,10 +1,6 @@
import { fixtureSync } from '@vaadin/testing-helpers';
import { visualDiff } from '@web/test-runner-visual-regression';
-import { badge } from '../../badge.js';
-
-const badgeStyle = document.createElement('style');
-badgeStyle.textContent = badge.cssText;
-document.head.appendChild(badgeStyle);
+import '../../badge-global.js';
describe('badge', () => {
it('flex-shrink', async () => {
diff --git a/packages/vaadin-lumo-styles/typography-global.js b/packages/vaadin-lumo-styles/typography-global.js
new file mode 100644
index 0000000000..9068405e6c
--- /dev/null
+++ b/packages/vaadin-lumo-styles/typography-global.js
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { addLumoGlobalStyles } from './global.js';
+import { typography } from './typography.js';
+
+addLumoGlobalStyles('typography', typography);
diff --git a/packages/vaadin-lumo-styles/typography.js b/packages/vaadin-lumo-styles/typography.js
index 1336128c59..52ac0764f0 100644
--- a/packages/vaadin-lumo-styles/typography.js
+++ b/packages/vaadin-lumo-styles/typography.js
@@ -5,6 +5,7 @@
*/
import './version.js';
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
const font = css`
:host {
@@ -123,9 +124,6 @@ const typography = css`
`;
registerStyles('', typography, { moduleId: 'lumo-typography' });
-
-const $tpl = document.createElement('template');
-$tpl.innerHTML = ``;
-document.head.appendChild($tpl.content);
+addLumoGlobalStyles('typography-props', font);
export { font, typography };
diff --git a/packages/vaadin-lumo-styles/user-colors.js b/packages/vaadin-lumo-styles/user-colors.js
index 5908d2f79b..e3a2ad3038 100644
--- a/packages/vaadin-lumo-styles/user-colors.js
+++ b/packages/vaadin-lumo-styles/user-colors.js
@@ -5,6 +5,7 @@
*/
import './version.js';
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { addLumoGlobalStyles } from './global.js';
const userColors = css`
:host {
@@ -28,8 +29,5 @@ const userColors = css`
}
`;
-const $tpl = document.createElement('template');
-$tpl.innerHTML = ``;
-document.head.appendChild($tpl.content);
-
+addLumoGlobalStyles('user-color-props', userColors);
export { userColors };
diff --git a/packages/vaadin-lumo-styles/utility-global.js b/packages/vaadin-lumo-styles/utility-global.js
new file mode 100644
index 0000000000..e9c45c1c05
--- /dev/null
+++ b/packages/vaadin-lumo-styles/utility-global.js
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { addLumoGlobalStyles } from './global.js';
+import { utility } from './utility.js';
+
+addLumoGlobalStyles('utility', utility);