摩纳哥编辑器工作不正常：样式没有很好地呈现

Question

我在 javascript 普通网络组件中使用 Monaco editor：

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);

并在我的 HTML 中这样使用：

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

结果是这样的：

Answer 1

我发现 here that the Monaco editor 不支持在阴影 dom 元素内使用。

为了解决这个问题，我重写了我的代码以便不使用这个 this.attachShadow({ mode: 'open' }); 配置，现在可以完美地工作了。

我相信将来我们可以在阴影 dom 元素上使用它（找到更多信息 here）。

摩纳哥编辑器工作不正常：样式没有很好地呈现

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

html

javascript

css

monaco-editor