CustomElementMonacoEditor.js

// old version

customElements.define("monaco-editor", class extends HTMLElement {
    constructor() {
        super();
        this._editorValue = "loading..."
    }


    set _editorValue(value) {
        console.log(value);
        if (!this._editor) return;
        this._editor.setValue(value);
    }

    connectedCallback() {
		this._editor = monaco.editor.create(this, {
			value: this._editorValue,
			language: 'javascript'
        });
        

        this._editor.onDidChangeModelContent(_ => {
            this.dispatchEvent(new CustomEvent("editorValueChanged"))
        })
    }

})


// new fixed version
customElements.define("monaco-editor", class extends HTMLElement {
    constructor() {
        super();
        this._editorValue = "loading..."
        Object.defineProperty(this, "_editorValue", {
            set: function(value) { 
                if (!this._editor) return;
                this._editor.setValue(value);
            }
        })
    }

    connectedCallback() {
		this._editor = monaco.editor.create(this, {
			value: this._editorValue,
			language: 'javascript'
        });        

        this._editor.onDidChangeModelContent(_ => {
            this.dispatchEvent(new CustomEvent("editorValueChanged"))
        })
    }
})