将 CodeMirror 添加到自定义元素的 Shadow Dom 中？

Question

我想在自定义元素内动态创建一个 CodeMirror 实例，并将其存在于元素的 Shadow DOM 内。例如：

<code-mirror>foo</code-mirror>
<script>
window.customElements.define('code-mirror', class extends HTMLElement {
    constructor() {
        super();
        let shadowRoot = this.attachShadow({mode: 'open'});
    }

    connectedCallback() {
        this.cm = CodeMirror(this.shadowRoot, {lineNumbers: true});
    }
});
</script>

这“有效”，但布局完全错误。左边距设置为窗口的宽度，行号显示不正确，并且选择逻辑垂直偏离了几行。

这是一个演示布局问题的 jsfiddle：链接

建议？

Answer 1

使用以下命令将 CodeMirror 的样式表导入到影子 DOM 中@import url：

constructor() {
    super();
    let shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
        <style>
           @import url(https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.css)
        </style>`         
}