From 5f1de86b41ba57b5e2411493c9cb22c925602a14 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Thu, 12 Nov 2026 18:19:34 +0200
Subject: [PATCH] perf(button, theming): remove quadratic costs from the first
 render
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Read ElementInternals.labels only when a label can name the host
  (an id or an ancestor <label>). Each read creates a live list that
  the browser updates on every DOM change, so N form controls cost
  O(N²). The SSR DOM shim has no closest(), so the server skips it.
- Keep the global theme listeners in a Set, not an EventTarget, which
  scans all listeners on each add and remove.
- Chat: drop the unused ids of the message action buttons.

5,000 list items with a button: Chromium 31.4 s -> 0.8 s, Firefox
12.4 s -> 2.4 s, WebKit 5.3 s -> 1.9 s.
---
 src/components/chat/chat-message.ts         |  1 -
 src/internals/controllers/internals.spec.ts | 51 +++++++++++++++++++++
 src/internals/controllers/internals.ts      | 23 +++++++---
 src/theming/config.ts                       | 44 +++++++++---------
 src/theming/theming-controller.ts           | 15 +++---
 src/theming/theming-event.ts                |  1 -
 6 files changed, 97 insertions(+), 38 deletions(-)

diff --git a/src/components/chat/chat-message.ts b/src/components/chat/chat-message.ts
index 5a3399dc2c..dfd0c3477a 100644
--- a/src/components/chat/chat-message.ts
+++ b/src/components/chat/chat-message.ts
@@ -272,7 +272,6 @@ export default class IgcChatMessageComponent extends HydrationMixin(
   ) {
     return html`
       <igc-icon-button
-        id=${`${name}-button`}
         name=${name}
         variant="flat"
         aria-label=${label}
diff --git a/src/internals/controllers/internals.spec.ts b/src/internals/controllers/internals.spec.ts
index 9c05b02199..2d0318ff21 100644
--- a/src/internals/controllers/internals.spec.ts
+++ b/src/internals/controllers/internals.spec.ts
@@ -6,6 +6,7 @@ import {
   unsafeStatic,
 } from '@open-wc/testing';
 import { LitElement } from 'lit';
+import sinon from 'sinon';
 import {
   addInternalsController,
   type ElementInternalsController,
@@ -243,5 +244,55 @@ describe('ElementInternals controller', () => {
 
       expect(host.internals.labels).to.be.null;
     });
+
+    describe('of a form associated host', () => {
+      let tag: string;
+      let tagName: ReturnType<typeof unsafeStatic>;
+
+      type Fixture = LitElement & { internals: ElementInternalsController };
+
+      before(() => {
+        tag = defineCE(
+          class extends LitElement {
+            public static formAssociated = true;
+            public internals = addInternalsController(this);
+          }
+        );
+        tagName = unsafeStatic(tag);
+      });
+
+      afterEach(() => sinon.restore());
+
+      it('does not create the live list when no label can name the host', async () => {
+        const root = await fixture<HTMLElement>(
+          html`<div><label>Other</label><${tagName}></${tagName}></div>`
+        );
+        const host = root.querySelector<Fixture>(tag)!;
+        const read = sinon.spy(ElementInternals.prototype, 'labels', ['get']);
+
+        expect(host.internals.labels).to.be.null;
+        expect(read.get.called).to.be.false;
+      });
+
+      it('returns the label that names the host id', async () => {
+        const root = await fixture<HTMLElement>(
+          html`<div>
+            <label for="named">Name</label><${tagName} id="named"></${tagName}>
+          </div>`
+        );
+        const host = root.querySelector<Fixture>('#named')!;
+
+        expect(host.internals.labels).to.eql([root.querySelector('label')]);
+      });
+
+      it('returns an ancestor label', async () => {
+        const label = await fixture<HTMLLabelElement>(
+          html`<label>Name <${tagName}></${tagName}></label>`
+        );
+        const host = label.querySelector<Fixture>(tag)!;
+
+        expect(host.internals.labels).to.eql([label]);
+      });
+    });
   });
 });
diff --git a/src/internals/controllers/internals.ts b/src/internals/controllers/internals.ts
index 9eea6337b1..fbf14e7c00 100644
--- a/src/internals/controllers/internals.ts
+++ b/src/internals/controllers/internals.ts
@@ -1,7 +1,8 @@
-import type {
-  LitElement,
-  ReactiveController,
-  ReactiveControllerHost,
+import {
+  isServer,
+  type LitElement,
+  type ReactiveController,
+  type ReactiveControllerHost,
 } from 'lit';
 import { sameItems } from '../utils/arrays.js';
 import { setOrRemoveAttribute } from '../utils/dom.js';
@@ -106,9 +107,17 @@ class ElementInternalsController implements ReactiveController {
       return this._labels;
     }
 
-    const host = this._host.constructor as { formAssociated?: boolean };
-    // The getter throws for an element that is not form associated.
-    const list = host.formAssociated ? this._internals.labels : null;
+    const host = this._host;
+    // The getter throws unless the host is form associated. Without an id or an
+    // ancestor `<label>`, no label can name the host, so skip the read: Chromium
+    // updates each live list on every DOM change until GC. The SSR DOM shim has
+    // no `closest()`.
+    const list =
+      !isServer &&
+      (host.constructor as { formAssociated?: boolean }).formAssociated &&
+      (host.id || host.closest('label'))
+        ? this._internals.labels
+        : null;
     const labels = list?.length
       ? Array.from(list as NodeListOf<Element>)
       : null;
diff --git a/src/theming/config.ts b/src/theming/config.ts
index dec85f270a..d9d3854b4a 100644
--- a/src/theming/config.ts
+++ b/src/theming/config.ts
@@ -1,7 +1,6 @@
 import { isServer } from 'lit';
 import {
   CHANGE_THEME_EVENT,
-  CHANGED_THEME_EVENT,
   type ChangeThemeEventDetail,
 } from './theming-event.js';
 import {
@@ -30,37 +29,40 @@ function setTheme(value: Theme, variant: ThemeVariant): void {
   themeVariant = variant;
 }
 
+/**
+ * The theming controllers that follow the global theme. Not an `EventTarget`:
+ * Chromium scans all listeners on each add and remove.
+ */
+export const _globalThemeListeners = new Set<{ globalThemeChanged(): void }>();
+
 /**
  * Relays "igc-change-theme" events from `window` to the theming controllers.
  * It also syncs the module state from the event detail, so an event from another
  * copy of the library changes the theme here too.
  */
-class ThemeChangedEmitter extends EventTarget {
-  constructor() {
-    super();
-    if (!isServer) {
-      globalThis.addEventListener(CHANGE_THEME_EVENT, this);
+function relayThemeChange({
+  detail,
+}: CustomEvent<ChangeThemeEventDetail>): void {
+  if (
+    isOfTypeTheme(detail?.theme) &&
+    isOfTypeThemeVariant(detail?.themeVariant)
+  ) {
+    // A repeated call or another copy of the library may send the active theme again.
+    if (detail.theme === theme && detail.themeVariant === themeVariant) {
+      return;
     }
-  }
 
-  /** @internal */
-  public handleEvent({ detail }: CustomEvent<ChangeThemeEventDetail>): void {
-    if (
-      isOfTypeTheme(detail?.theme) &&
-      isOfTypeThemeVariant(detail?.themeVariant)
-    ) {
-      // A repeated call or another copy of the library may send the active theme again.
-      if (detail.theme === theme && detail.themeVariant === themeVariant) {
-        return;
-      }
+    setTheme(detail.theme, detail.themeVariant);
 
-      setTheme(detail.theme, detail.themeVariant);
-      this.dispatchEvent(new CustomEvent(CHANGED_THEME_EVENT));
+    for (const listener of _globalThemeListeners) {
+      listener.globalThemeChanged();
     }
   }
 }
 
-export const _themeChangedEmitter = new ThemeChangedEmitter();
+if (!isServer) {
+  globalThis.addEventListener(CHANGE_THEME_EVENT, relayThemeChange);
+}
 
 export function getTheme(): ChangeThemeEventDetail {
   if (!(theme && themeVariant)) {
@@ -92,7 +94,7 @@ export function getTheme(): ChangeThemeEventDetail {
 export function configureTheme(t: Theme, v: ThemeVariant = 'light'): void {
   if (isOfTypeTheme(t) && isOfTypeThemeVariant(v)) {
     if (isServer) {
-      // On the client, the emitter's window listener sets the state.
+      // On the client, the window listener sets the state.
       setTheme(t, v);
     } else {
       globalThis.dispatchEvent(
diff --git a/src/theming/theming-controller.ts b/src/theming/theming-controller.ts
index f1b4134bc7..d891089195 100644
--- a/src/theming/theming-controller.ts
+++ b/src/theming/theming-controller.ts
@@ -7,9 +7,8 @@ import {
 } from 'lit';
 
 import { getOrInsertComputed } from '#internals/utils/objects.js';
-import { _themeChangedEmitter, getTheme } from './config.js';
+import { _globalThemeListeners, getTheme } from './config.js';
 import { type ThemeContext, themeContext } from './context.js';
-import { CHANGED_THEME_EVENT } from './theming-event.js';
 import type {
   ComponentThemes,
   Theme,
@@ -67,7 +66,7 @@ function resolveSheets(
  * 2. **Global** - the application-wide theme set via `configureTheme()`.
  *
  * When a context provider is present, the controller subscribes to its updates
- * and stops listening to global theme change events. When the host element is
+ * and stops following the global theme. When the host element is
  * disconnected and reconnected outside a provider, it automatically falls back
  * to the global theme.
  *
@@ -139,14 +138,14 @@ class ThemingController implements ReactiveController {
   /** @internal */
   public hostConnected(): void {
     if (this._themeSource === 'uninitialized') {
-      _themeChangedEmitter.addEventListener(CHANGED_THEME_EVENT, this);
+      _globalThemeListeners.add(this);
       this._applyGlobalTheme();
     }
   }
 
   /** @internal */
   public hostDisconnected(): void {
-    _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
+    _globalThemeListeners.delete(this);
 
     // Re-resolve the theme source on reconnect, which may be in another part of the tree.
     this._themeSource = 'uninitialized';
@@ -154,10 +153,10 @@ class ThemingController implements ReactiveController {
 
   //#endregion
 
-  //#region Event handling
+  //#region Global theme
 
   /** @internal */
-  public handleEvent(): void {
+  public globalThemeChanged(): void {
     if (this._themeSource === 'global') {
       this._applyGlobalTheme();
     }
@@ -168,7 +167,7 @@ class ThemingController implements ReactiveController {
   //#region Internal methods
 
   private _applyContextTheme({ theme, variant }: ThemeContext): void {
-    _themeChangedEmitter.removeEventListener(CHANGED_THEME_EVENT, this);
+    _globalThemeListeners.delete(this);
     this._themeSource = 'context';
     this._applyTheme(theme, variant);
   }
diff --git a/src/theming/theming-event.ts b/src/theming/theming-event.ts
index 1acfc0d600..55afa7799a 100644
--- a/src/theming/theming-event.ts
+++ b/src/theming/theming-event.ts
@@ -1,7 +1,6 @@
 import type { Theme, ThemeVariant } from './types.js';
 
 export const CHANGE_THEME_EVENT = 'igc-change-theme';
-export const CHANGED_THEME_EVENT = 'igc-changed-theme';
 
 declare global {
   interface WindowEventMap {