refactor: allow LumoInjector to be disabled at specific roots (#10542)

Author: vursen

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

@@ -68,8 +68,16 @@ export const LumoInjectionMixin = (superClass) =>
     connectedCallback() {
       super.connectedCallback();
 
+      const root = findRoot(this);
+
+      // Do not initialize LumoInjector if it's disabled at the root.
+      // For example, Copilot does this because it uses its own styles
+      // on top of the base styles, and Lumo injection would interfere.
+      if (root.__lumoInjectorDisabled) {
+        return;
+      }
+
       if (this.isConnected) {
-        const root = findRoot(this);
         root.__lumoInjector ||= new LumoInjector(root);
         this.__lumoInjector = root.__lumoInjector;
         this.__lumoInjector.componentConnected(this);

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

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextRender, oneEvent } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import { css, html, LitElement } from 'lit';
 import { LumoInjectionMixin } from '../lumo-injection-mixin.js';
 import { registerStyles, ThemableMixin } from '../vaadin-themable-mixin.js';
@@ -428,6 +428,29 @@ describe('Lumo injection', () => {
         assertBaseStyle();
       });
     });
+
+    describe('injection disabled', () => {
+      beforeEach(async () => {
+        host.__lumoInjectorDisabled = true;
+        host.shadowRoot.appendChild(element);
+        await nextRender();
+        content = element.shadowRoot.querySelector('[part="content"]');
+      });
+
+      it('should not inject styles', async () => {
+        const style = document.createElement('style');
+        style.textContent = TEST_FOO_STYLES;
+        document.head.appendChild(style);
+
+        await nextFrame();
+        assertBaseStyle();
+
+        style.remove();
+
+        await nextFrame();
+        assertBaseStyle();
+      });
+    });
   });
 
   describe('nested component', () => {