[Feature Request] Set className and textContent in the dynamic style element "monaco-colors" before appended

[csu-feizao]

Context

• This issue is not a bug report. (please use a different template for reporting a bug)
• This issue is not a duplicate of an existing issue. (please use the search to find existing issues)

Description

monaco-editor will dynamically create a monaco-colors style element and append it to DOM. But the code is to append to DOM first, then to set its className and textConent.

That is not a bug for monaco-editor, but may cause some bugs in the user application, especially with the micro-frontends applications like qiankun.

For example, most of the micro-frontends applications rewrote the document.head.appendChild method to handle style isolation. When monaco-editor append the monaco-colors style element, style isolation handle function couldn't get any information from that element which was empty at that time.

In my case, I want to prevent this style from being handled by qiankun, like

const rawHeadAppendChild = HTMLHeadElement.prototype.appendChild
HTMLHeadElement.prototype.appendChild = function (node) {
  if (node.className === 'monaco-colors') {
    return rawHeadAppendChild.call(this, node)
  }
  return this.appendChild(node)
}

So can we change the order of creating the 'monaco-colors' style element? If ok I would like to create a pr

There is the original code:

vscode -> src/vs/editor/standalone/browser/standaloneThemeService.ts -> line 285

	private _registerShadowDomContainer(domNode: HTMLElement): IDisposable {
		const styleElement = dom.createStyleSheet(domNode);
		styleElement.className = 'monaco-colors';
		styleElement.textContent = this._allCSS;
		...
	}

vscode -> src/vs/base/browser/dom.ts -> line 694

export function createStyleSheet(container: HTMLElement = document.getElementsByTagName('head')[0]): HTMLStyleElement {
	const style = document.createElement('style');
	style.type = 'text/css';
	style.media = 'screen';
	container.appendChild(style);
	return style;
}

There is the code after being changed:
vscode -> src/vs/editor/standalone/browser/standaloneThemeService.ts -> line 285

	private _registerShadowDomContainer(domNode: HTMLElement): IDisposable {
		const styleElement = dom.createStyleSheet(domNode, style => {
		    style.className = 'monaco-colors';
		    style.textContent = this._allCSS;
                });
		...
	}

vscode -> src/vs/base/browser/dom.ts -> line 694

export function createStyleSheet(container: HTMLElement = document.getElementsByTagName('head')[0], beforeAppend?: (style: HTMLStyleElement) => void): HTMLStyleElement {
	const style = document.createElement('style');
	style.type = 'text/css';
	style.media = 'screen';
        beforeAppend?.(style)
	container.appendChild(style);
	return style;
}

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

[hediet]

I think this request makes sense. Thanks for providing a PR!