Search code examples
javascripthtmlcssmonaco-editor

Monaco Editor not working well: The styles are not being well presented

I'm using Monaco editor inside of a javascript vanilla web components:

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

class CodeEditor extends HTMLElement {
    constructor() {
        super();
        this.css = (...)
        this.html = (...)
    }

    connectedCallback() {
        this.attachShadow({
            mode: 'open'
        });
        const root = this.getRootElement();
        this.shadowRoot.append(this.getStyles(), root);
        this.editor = monaco.editor.create(root, {
            value: this.getExampleCode(),
            language: 'javascript',
            theme: 'vs-dark',
        });
    }

    getRootElement() { return (...) //creates a template dom element and returns it}

    getStyles() {return (...)}

    getExampleCode() {return (...)}
}

window.customElements.define('code-editor', CodeEditor);

And using in my HTML like this:

<div id="code-editor" class="code-editor">
   <code-editor></code-editor>
</div>

The result is this mess:

enter image description here

Solution

  • I found out here that the Monaco editor does not support being used inside a shadow dom element.

    To solve it, I rewrote my code in order to not use this this.attachShadow({ mode: 'open' }); configuration and now works perfectly.

    I believe in the future we will be able to use it on shadow dom elements (found more information here).