dom - adopt more textContent over innerText (microsoft#260259)

bpasero · web-flow · commit d2bd76b5cad7 · 2025-08-08T09:23:44.000+02:00
Test the waters: `innerText` does more, considering styles as well. I would argue we have used `innerText` without the need for this behaviour in most cases. See https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts
@@ -1279,7 +1279,7 @@ export function prepend<T extends Node>(parent: HTMLElement, child: T): T {
  * Removes all children from `parent` and appends `children`
  */
 export function reset(parent: HTMLElement, ...children: Array<Node | string>): void {
-	parent.innerText = '';
+	parent.textContent = '';
 	append(parent, ...children);
 }
 
diff --git a/src/vs/base/browser/domStylesheets.ts b/src/vs/base/browser/domStylesheets.ts
@@ -32,9 +32,9 @@ class WrappedStyleElement {
 		this._currentCssStyle = cssStyle;
 
 		if (!this._styleSheet) {
-			this._styleSheet = createStyleSheet(mainWindow.document.head, (s) => s.innerText = cssStyle);
+			this._styleSheet = createStyleSheet(mainWindow.document.head, (s) => s.textContent = cssStyle);
 		} else {
-			this._styleSheet.innerText = cssStyle;
+			this._styleSheet.textContent = cssStyle;
 		}
 	}
 
diff --git a/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts b/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts
@@ -163,7 +163,7 @@ export class BreadcrumbsWidget {
 		if (style.breadcrumbsHoverForeground) {
 			content += `.monaco-breadcrumbs:not(.disabled	) .monaco-breadcrumb-item:hover:not(.focused):not(.selected) { color: ${style.breadcrumbsHoverForeground}}\n`;
 		}
-		styleElement.innerText = content;
+		styleElement.textContent = content;
 	}
 
 	setEnabled(value: boolean) {
@@ -332,7 +332,7 @@ export class BreadcrumbsWidget {
 		try {
 			item.render(container);
 		} catch (err) {
-			container.innerText = '<<RENDER ERROR>>';
+			container.textContent = '<<RENDER ERROR>>';
 			console.error(err);
 		}
 		container.tabIndex = -1;
diff --git a/src/vs/base/browser/ui/iconLabel/iconLabel.ts b/src/vs/base/browser/ui/iconLabel/iconLabel.ts
@@ -275,14 +275,14 @@ class Label {
 
 		if (typeof label === 'string') {
 			if (!this.singleLabel) {
-				this.container.innerText = '';
+				this.container.textContent = '';
 				this.container.classList.remove('multiple');
 				this.singleLabel = dom.append(this.container, dom.$('a.label-name', { id: options?.domId }));
 			}
 
 			this.singleLabel.textContent = label;
 		} else {
-			this.container.innerText = '';
+			this.container.textContent = '';
 			this.container.classList.add('multiple');
 			this.singleLabel = undefined;
 
@@ -340,14 +340,14 @@ class LabelWithHighlights extends Disposable {
 
 		if (typeof label === 'string') {
 			if (!this.singleLabel) {
-				this.container.innerText = '';
+				this.container.textContent = '';
 				this.container.classList.remove('multiple');
 				this.singleLabel = this._register(new HighlightedLabel(dom.append(this.container, dom.$('a.label-name', { id: options?.domId })), { supportIcons: this.supportIcons }));
 			}
 
 			this.singleLabel.set(label, options?.matches, undefined, options?.labelEscapeNewLines);
 		} else {
-			this.container.innerText = '';
+			this.container.textContent = '';
 			this.container.classList.add('multiple');
 			this.singleLabel = undefined;
 
diff --git a/src/vs/base/browser/ui/menu/menu.ts b/src/vs/base/browser/ui/menu/menu.ts
@@ -630,12 +630,12 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 								escMatch[3]),
 							strings.rtrim(replaceDoubleEscapes(label.substr(escMatch.index + escMatch[0].length)), ' '));
 					} else {
-						this.label.innerText = replaceDoubleEscapes(label).trim();
+						this.label.textContent = replaceDoubleEscapes(label).trim();
 					}
 
 					this.item?.setAttribute('aria-keyshortcuts', (!!matches[1] ? matches[1] : matches[3]).toLocaleLowerCase());
 				} else {
-					this.label.innerText = label.replace(/&&/g, '&').trim();
+					this.label.textContent = label.replace(/&&/g, '&').trim();
 				}
 			}
 		}
diff --git a/src/vs/base/browser/ui/menu/menubar.ts b/src/vs/base/browser/ui/menu/menubar.ts
@@ -583,17 +583,17 @@ export class MenuBar extends Disposable {
 			const replaceDoubleEscapes = (str: string) => str.replace(/&amp;&amp;/g, '&amp;');
 
 			if (escMatch) {
-				titleElement.innerText = '';
+				titleElement.textContent = '';
 				titleElement.append(
 					strings.ltrim(replaceDoubleEscapes(cleanLabel.substr(0, escMatch.index)), ' '),
 					$('mnemonic', { 'aria-hidden': 'true' }, escMatch[3]),
 					strings.rtrim(replaceDoubleEscapes(cleanLabel.substr(escMatch.index + escMatch[0].length)), ' ')
 				);
 			} else {
-				titleElement.innerText = replaceDoubleEscapes(cleanLabel).trim();
+				titleElement.textContent = replaceDoubleEscapes(cleanLabel).trim();
 			}
 		} else {
-			titleElement.innerText = cleanMenuLabel.replace(/&&/g, '&');
+			titleElement.textContent = cleanMenuLabel.replace(/&&/g, '&');
 		}
 
 		const mnemonicMatches = MENU_MNEMONIC_REGEX.exec(label);
diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts
@@ -63,7 +63,7 @@ class SelectListRenderer implements IListRenderer<ISelectOptionItem, ISelectList
 
 		data.text.textContent = text;
 		data.detail.textContent = !!detail ? detail : '';
-		data.decoratorRight.innerText = !!decoratorRight ? decoratorRight : '';
+		data.decoratorRight.textContent = !!decoratorRight ? decoratorRight : '';
 
 		// pseudo-select disabled option
 		if (isDisabled) {
@@ -450,7 +450,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 	// ContextView dropdown methods
 
 	private showSelectDropDown() {
-		this.selectionDetailsPane.innerText = '';
+		this.selectionDetailsPane.textContent = '';
 
 		if (!this.contextViewProvider || this._isVisible) {
 			return;
@@ -902,7 +902,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 	}
 
 	private updateDetail(selectedIndex: number): void {
-		this.selectionDetailsPane.innerText = '';
+		this.selectionDetailsPane.textContent = '';
 		const option = this.options[selectedIndex];
 		const description = option?.description ?? '';
 		const descriptionIsMarkdown = option?.descriptionIsMarkdown ?? false;
@@ -912,7 +912,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 				const actionHandler = option.descriptionMarkdownActionHandler;
 				this.selectionDetailsPane.appendChild(this.renderDescriptionMarkdown(description, actionHandler));
 			} else {
-				this.selectionDetailsPane.innerText = description;
+				this.selectionDetailsPane.textContent = description;
 			}
 			this.selectionDetailsPane.style.display = 'block';
 		} else {
diff --git a/src/vs/workbench/browser/parts/banner/bannerPart.ts b/src/vs/workbench/browser/parts/banner/bannerPart.ts
@@ -136,7 +136,7 @@ export class BannerPart extends Part implements IBannerService {
 	private getBannerMessage(message: MarkdownString | string): HTMLElement {
 		if (typeof message === 'string') {
 			const element = $('span');
-			element.innerText = message;
+			element.textContent = message;
 			return element;
 		}
 
diff --git a/src/vs/workbench/browser/parts/compositePart.ts b/src/vs/workbench/browser/parts/compositePart.ts
@@ -430,7 +430,7 @@ export abstract class CompositePart<T extends Composite> extends Part {
 			updateTitle: (id, title, keybinding) => {
 				// The title label is shared for all composites in the base CompositePart
 				if (!this.activeComposite || this.activeComposite.getId() === id) {
-					titleLabel.innerText = title;
+					titleLabel.textContent = title;
 					hover.update(keybinding ? localize('titleTooltip', "{0} ({1})", title, keybinding) : title);
 				}
 			},
diff --git a/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts b/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts
@@ -85,7 +85,7 @@ class OutlineItem extends BreadcrumbsItem {
 		const templateId = outline.config.delegate.getTemplateId(element);
 		const renderer = outline.config.renderers.find(renderer => renderer.templateId === templateId);
 		if (!renderer) {
-			container.innerText = '<<NO RENDERER>>';
+			container.textContent = '<<NO RENDERER>>';
 			return;
 		}
 
@@ -388,7 +388,7 @@ export class BreadcrumbsControl {
 				this._widget.setEnabled(false);
 				this._widget.setItems([new class extends BreadcrumbsItem {
 					render(container: HTMLElement): void {
-						container.innerText = localize('empty', "no elements");
+						container.textContent = localize('empty', "no elements");
 					}
 					equals(other: BreadcrumbsItem): boolean {
 						return other === this;
diff --git a/src/vs/workbench/browser/parts/editor/editorPart.ts b/src/vs/workbench/browser/parts/editor/editorPart.ts
@@ -62,7 +62,7 @@ class GridWidgetView<T extends IView> implements IView {
 	}
 
 	set gridWidget(grid: Grid<T> | undefined) {
-		this.element.innerText = '';
+		this.element.textContent = '';
 
 		if (grid) {
 			this.element.appendChild(grid.element);
diff --git a/src/vs/workbench/browser/parts/paneCompositePart.ts b/src/vs/workbench/browser/parts/paneCompositePart.ts
@@ -266,7 +266,7 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
 		this.emptyPaneMessageElement = $('.empty-pane-message-area');
 
 		const messageElement = $('.empty-pane-message');
-		messageElement.innerText = localize('pane.emptyMessage', "Drag a view here to display.");
+		messageElement.textContent = localize('pane.emptyMessage', "Drag a view here to display.");
 
 		this.emptyPaneMessageElement.appendChild(messageElement);
 		parent.appendChild(this.emptyPaneMessageElement);
diff --git a/src/vs/workbench/browser/parts/titlebar/commandCenterControl.ts b/src/vs/workbench/browser/parts/titlebar/commandCenterControl.ts
@@ -154,22 +154,22 @@ class CommandCenterCenterViewItem extends BaseActionViewItem {
 							const label = this._getLabel();
 							const labelElement = document.createElement('span');
 							labelElement.classList.add('search-label');
-							labelElement.innerText = label;
+							labelElement.textContent = label;
 							reset(container, searchIcon, labelElement);
 
 							const hover = this._store.add(that._hoverService.setupManagedHover(that._hoverDelegate, container, this.getTooltip()));
 
 							// update label & tooltip when window title changes
 							this._store.add(that._windowTitle.onDidChange(() => {
 								hover.update(this.getTooltip());
-								labelElement.innerText = this._getLabel();
+								labelElement.textContent = this._getLabel();
 							}));
 
 							// update label & tooltip when tabs visibility changes
 							this._store.add(that._editorGroupService.onDidChangeEditorPartOptions(({ newPartOptions, oldPartOptions }) => {
 								if (newPartOptions.showTabs !== oldPartOptions.showTabs) {
 									hover.update(this.getTooltip());
-									labelElement.innerText = this._getLabel();
+									labelElement.textContent = this._getLabel();
 								}
 							}));
 						}
diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
@@ -561,9 +561,9 @@ export class BrowserTitlebarPart extends Part implements ITitlebarPart {
 		// Text Title
 		if (!this.isCommandCenterVisible) {
 			if (!isShowingTitleInNativeTitlebar) {
-				this.title.innerText = this.windowTitle.value;
+				this.title.textContent = this.windowTitle.value;
 				this.titleDisposables.add(this.windowTitle.onDidChange(() => {
-					this.title.innerText = this.windowTitle.value;
+					this.title.textContent = this.windowTitle.value;
 					if (this.lastLayoutDimensions) {
 						this.updateLayout(this.lastLayoutDimensions); // layout menubar and other renderings in the titlebar
 					}
@@ -865,7 +865,7 @@ export class BrowserTitlebarPart extends Part implements ITitlebarPart {
 			this.customMenubar.value.layout(menubarDimension);
 		}
 
-		const hasCenter = this.isCommandCenterVisible || this.title.innerText !== '';
+		const hasCenter = this.isCommandCenterVisible || this.title.textContent !== '';
 		this.rootContainer.classList.toggle('has-center', hasCenter);
 	}
 
diff --git a/src/vs/workbench/browser/parts/views/viewPane.ts b/src/vs/workbench/browser/parts/views/viewPane.ts
@@ -219,7 +219,7 @@ class ViewWelcomeController {
 
 	private render(): void {
 		this.renderDisposables.clear();
-		this.element!.innerText = '';
+		this.element!.textContent = '';
 
 		const contents = this.getContentDescriptors();
 
diff --git a/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts b/src/vs/workbench/contrib/codeEditor/browser/find/simpleFindWidget.ts
@@ -407,7 +407,7 @@ export abstract class SimpleFindWidget extends Widget implements IVerticalSashLa
 		}
 
 		const count = await this._getResultCount();
-		this._matchesCount.innerText = '';
+		this._matchesCount.textContent = '';
 		const showRedOutline = (this.inputValue.length > 0 && count?.resultCount === 0);
 		this._matchesCount.classList.toggle('no-results', showRedOutline);
 		let label = '';
diff --git a/src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts b/src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts
@@ -267,14 +267,14 @@ export class DocumentSymbolRenderer implements ITreeRenderer<OutlineElement, Fuz
 		} else if (count > 0) {
 			dom.show(template.decoration);
 			template.decoration.classList.remove('bubble');
-			template.decoration.innerText = count < 10 ? count.toString() : '+9';
+			template.decoration.textContent = count < 10 ? count.toString() : '+9';
 			template.decoration.title = count === 1 ? localize('1.problem', "1 problem in this element") : localize('N.problem', "{0} problems in this element", count);
 			template.decoration.style.setProperty('--outline-element-color', cssColor);
 
 		} else {
 			dom.show(template.decoration);
 			template.decoration.classList.add('bubble');
-			template.decoration.innerText = '\uea71';
+			template.decoration.textContent = '\uea71';
 			template.decoration.title = localize('deep.problem', "Contains elements with problems");
 			template.decoration.style.setProperty('--outline-element-color', cssColor);
 		}
diff --git a/src/vs/workbench/contrib/outline/browser/outlinePane.ts b/src/vs/workbench/contrib/outline/browser/outlinePane.ts
@@ -180,7 +180,7 @@ export class OutlinePane extends ViewPane implements IOutlinePane {
 	private _showMessage(message: string) {
 		this._domNode.classList.add('message');
 		this._progressBar.stop().hide();
-		this._message.innerText = message;
+		this._message.textContent = message;
 	}
 
 	private _captureViewState(uri?: URI): boolean {

Original file line number	Diff line number	Diff line change
`@@ -1279,7 +1279,7 @@ export function prepend<T extends Node>(parent: HTMLElement, child: T): T {`
`1279`	`1279`	* Removes all children from `parent` and appends `children`
`1280`	`1280`	`*/`
`1281`	`1281`	`export function reset(parent: HTMLElement, ...children: Array<Node \| string>): void {`
`1282`		`- parent.innerText = '';`
	`1282`	`+ parent.textContent = '';`
`1283`	`1283`	`append(parent, ...children);`
`1284`	`1284`	`}`
`1285`	`1285`
Original file line number	Diff line number	Diff line change
`@@ -32,9 +32,9 @@ class WrappedStyleElement {`
`32`	`32`	`this._currentCssStyle = cssStyle;`
`33`	`33`
`34`	`34`	`if (!this._styleSheet) {`
`35`		`- this._styleSheet = createStyleSheet(mainWindow.document.head, (s) => s.innerText = cssStyle);`
	`35`	`+ this._styleSheet = createStyleSheet(mainWindow.document.head, (s) => s.textContent = cssStyle);`
`36`	`36`	`} else {`
`37`		`- this._styleSheet.innerText = cssStyle;`
	`37`	`+ this._styleSheet.textContent = cssStyle;`
`38`	`38`	`}`
`39`	`39`	`}`
`40`	`40`
Original file line number	Diff line number	Diff line change
`@@ -163,7 +163,7 @@ export class BreadcrumbsWidget {`
`163`	`163`	`if (style.breadcrumbsHoverForeground) {`
`164`	`164`	content += `.monaco-breadcrumbs:not(.disabled ) .monaco-breadcrumb-item:hover:not(.focused):not(.selected) { color: ${style.breadcrumbsHoverForeground}}\n`;
`165`	`165`	`}`
`166`		`- styleElement.innerText = content;`
	`166`	`+ styleElement.textContent = content;`
`167`	`167`	`}`
`168`	`168`
`169`	`169`	`setEnabled(value: boolean) {`
`@@ -332,7 +332,7 @@ export class BreadcrumbsWidget {`
`332`	`332`	`try {`
`333`	`333`	`item.render(container);`
`334`	`334`	`} catch (err) {`
`335`		`- container.innerText = '<<RENDER ERROR>>';`
	`335`	`+ container.textContent = '<<RENDER ERROR>>';`
`336`	`336`	`console.error(err);`
`337`	`337`	`}`
`338`	`338`	`container.tabIndex = -1;`
Original file line number	Diff line number	Diff line change
`@@ -630,12 +630,12 @@ class BaseMenuActionViewItem extends BaseActionViewItem {`
`630`	`630`	`escMatch[3]),`
`631`	`631`	`strings.rtrim(replaceDoubleEscapes(label.substr(escMatch.index + escMatch[0].length)), ' '));`
`632`	`632`	`} else {`
`633`		`- this.label.innerText = replaceDoubleEscapes(label).trim();`
	`633`	`+ this.label.textContent = replaceDoubleEscapes(label).trim();`
`634`	`634`	`}`
`635`	`635`
`636`	`636`	`this.item?.setAttribute('aria-keyshortcuts', (!!matches[1] ? matches[1] : matches[3]).toLocaleLowerCase());`
`637`	`637`	`} else {`
`638`		`- this.label.innerText = label.replace(/&&/g, '&').trim();`
	`638`	`+ this.label.textContent = label.replace(/&&/g, '&').trim();`
`639`	`639`	`}`
`640`	`640`	`}`
`641`	`641`	`}`
Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,7 @@ export class BannerPart extends Part implements IBannerService {`
`136`	`136`	`private getBannerMessage(message: MarkdownString \| string): HTMLElement {`
`137`	`137`	`if (typeof message === 'string') {`
`138`	`138`	`const element = $('span');`
`139`		`- element.innerText = message;`
	`139`	`+ element.textContent = message;`
`140`	`140`	`return element;`
`141`	`141`	`}`
`142`	`142`
Original file line number	Diff line number	Diff line change
`@@ -430,7 +430,7 @@ export abstract class CompositePart<T extends Composite> extends Part {`
`430`	`430`	`updateTitle: (id, title, keybinding) => {`
`431`	`431`	`// The title label is shared for all composites in the base CompositePart`
`432`	`432`	`if (!this.activeComposite \|\| this.activeComposite.getId() === id) {`
`433`		`- titleLabel.innerText = title;`
	`433`	`+ titleLabel.textContent = title;`
`434`	`434`	`hover.update(keybinding ? localize('titleTooltip', "{0} ({1})", title, keybinding) : title);`
`435`	`435`	`}`
`436`	`436`	`},`