[Bug] Cannot run monaco with lit and webpack

[jianSings]

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [ ] Not reproducible in the monaco editor playground

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

Reproduction Steps

No response

Actual (Problematic) Behavior

While injecting the monaco-editor using lit and webpack I am not able to render the editor completely it shows an error custom-element.js:11 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "my-component" has already been used with this registry

Expected Behavior

No response

Additional Context

No response

[hungtcs]

custom-element.js:11 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "my-component" has already been used with this registry

This error appears to be due to a duplicate registration of the web component. You need to check your code, if you are already using the @customElement decorator, you don't need to manually register again.

[jianSings]

So I am using a component and defining the custom element in index

`import { LitElement, html, css } from 'lit'; import { property, customElement } from 'lit/decorators.js'; import { createRef, Ref, ref } from "lit/directives/ref.js"; import * as monaco from 'monaco-editor';

@customElement('my-component') export class MyMonacoEditor extends LitElement { private container: Ref = createRef(); editor?: monaco.editor.IStandaloneCodeEditor; @property({ type: Boolean, attribute: "readonly" }) readOnly?: boolean; @property() theme?: string; @property() language?: string; @property() code?: string;

static styles = css :host { --editor-width: 100%; --editor-height: 100vh; } main { width: var(--editor-width); height: var(--editor-height); } ;

render() { return html`

  <main ${ref(this.container)}></main>
`;

}

private getFile() { if (this.children.length > 0) return this.children[0]; return null; }

private getCode() { if (this.code) return this.code; const file = this.getFile(); if (!file) return; return file.innerHTML.trim(); }

private getLang() { if (this.language) return this.language; const file = this.getFile(); if (!file) return; const type = file.getAttribute("type")!; return type.split("/").pop()!; }

private getTheme() { if (this.theme) return this.theme; if (this.isDark()) return "vs-dark"; return "vs-light"; }

private isDark() { return ( window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ); }

setValue(value: string) { this.editor!.setValue(value); }

getValue() { const value = this.editor!.getValue(); return value; }

setReadOnly(value: boolean) { this.readOnly = value; this.setOptions({ readOnly: value }); }

setOptions(value: monaco.editor.IStandaloneEditorConstructionOptions) { this.editor!.updateOptions(value); }

firstUpdated() { this.editor = monaco.editor.create(this.container.value!, { value: this.getCode(), language: this.getLang(), theme: this.getTheme(), automaticLayout: true, readOnly: this.readOnly ?? false, }); this.editor.getModel()!.onDidChangeContent(() => { this.dispatchEvent(new CustomEvent("change", { detail: {} })); }); window .matchMedia("(prefers-color-scheme: dark)") .addEventListener("change", () => { monaco.editor.setTheme(this.getTheme()); }); } }

declare global { interface HTMLElementTagNameMap { "my-component": MyMonacoEditor; } }`

Code - monaco-webpack-ts.zip

Also does this fix also account for the autocomplete UI issue and the double cursor errors?