Skip to content

Simplified "getAssociatedLabels" with custom elements support #43997

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Konstantin Roman (nihil-pro) wants to merge 2 commits into from
Closed

Simplified "getAssociatedLabels" with custom elements support #43997

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cecfc57
Simplified "getAssociatedLabels" with custom elements support
Nov 8, 2026
7145d64
Convert live collection to an array before return
Nov 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 22 additions & 28 deletions packages/injected/src/domUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@
type GlobalOptions = {
browserNameForWorkarounds?: string;
};

let globalOptions: GlobalOptions = {};

export function setGlobalOptions(options: GlobalOptions) {
globalOptions = options;
}
Expand Down Expand Up @@ -67,34 +69,26 @@ export function enclosingShadowRootOrDocument(element: Element): Document | Shad

export function getAssociatedLabels(element: Element): HTMLLabelElement[] {
// https://html.spec.whatwg.org/multipage/forms.html#category-label
const isNonHiddenInput = element.nodeName === 'INPUT' && (element as HTMLInputElement).type !== 'hidden';
if (['BUTTON', 'METER', 'OUTPUT', 'PROGRESS', 'SELECT', 'TEXTAREA'].includes(element.nodeName) || isNonHiddenInput)
return [...(element as HTMLInputElement).labels || []];
if (!element.localName.includes('-'))
return [];

// Custom elements expose labels only through ElementInternals. Read the association from the labels instead.
const root = element.getRootNode() as Document | DocumentFragment | Element;
let labelsByControl = cacheLabelsByControl?.get(root);
if (!labelsByControl) {
labelsByControl = new Map();
const allLabels = [...root.querySelectorAll('label')];
if (root instanceof HTMLLabelElement)
allLabels.unshift(root);
for (const label of allLabels) {
const control = label.control;
if (!control)
continue;
let labels = labelsByControl.get(control);
if (!labels) {
labels = [];
labelsByControl.set(control, labels);
}
labels.push(label);
}
cacheLabelsByControl?.set(root, labelsByControl);
}
return labelsByControl.get(element) || [];

// "labels" property exists only for INPUT, BUTTON, METER, OUTPUT, PROGRESS, SELECT and TEXTAREA,
// but hardcoding these names limits custom elements.
// Any custom element that wants to be a real form element must also implement a "labels" getter:
// class CustomFormElement extends HTMLElement {
// static formAssociated = true;
// #internals;
//
// constructor() {
// super();
// this.#internals = this.attachInternals();
// }
//
// get labels() {
// return this.#internals.labels;
// }
// }
// Also, for a hidden input, the "labels" getter will return null.
// So this function can be simplified dramatically:
return Array.from(Reflect.get(element, "labels") || []);
}

function enclosingShadowHost(element: Element): Element | undefined {
Expand Down