摩納哥編輯器運行不佳：styles 沒有很好地展示

Question

我在 javascript vanilla 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

我在這里發現Monaco 編輯器不支持在 shadow dom 元素中使用。

為了解決這個問題，我重寫了我的代碼以便不使用this.attachShadow({ mode: 'open' }); 配置，現在完美運行。

我相信將來我們將能夠在 shadow dom 元素上使用它（在此處找到更多信息）。