const defaultValue = `async function main() {
  // select this text with the mouse and an error will appear in the console
}
main().catch((err) => console.error(err))
`;

class MyElement extends HTMLElement {
	constructor() {
		super();
		const shadowRoot = this.attachShadow({ mode: "open" });
		const styleLink = document.createElement('link');
		styleLink.rel ='stylesheet';
		styleLink.href = 'node_modules/monaco-editor/min/vs/editor/editor.main.css'
		shadowRoot.appendChild(styleLink);
	}

	connectedCallback() {
		const conatiner = document.createElement("div");
		conatiner.style.width ='100%'
		conatiner.style.height ='320px'
		conatiner.style.resize ='both'
		conatiner.style.overflow ='hidden'
		this.shadowRoot?.appendChild(conatiner);
		
		monaco.editor.create(conatiner, {
			value: defaultValue,
			theme: 'vs-dark',
			language: "javascript",
			automaticLayout: true,
		});
	}
}

customElements.define('my-element', MyElement);