摩纳哥编辑工作不佳:风格没有很好的呈现

Question

我在javascript香草web组件中使用摩纳哥编辑：

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

我发现这里不支持在影子dom元素中使用摩纳哥编辑。

为了解决这个问题，我重写了我的代码，以避免使用这个this.attachShadow({ mode: 'open' });配置，现在工作得很好。

我相信，在未来，我们将能够使用它的影子多姆元素(找到更多的信息，这里)。