将CodeMirror添加到自定义元素的阴影Dom？ [英] Adding CodeMirror to Shadow Dom of Custom Element?

问题描述

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

I'd like to dynamically create a CodeMirror instance inside a Custom Element and have it live inside the element's Shadow DOM. For example:

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

这工作但布局完全错误.. margin-left设置为宽度窗口，行号没有正确显示，选择逻辑垂直偏离几行。

This "works" but the layout is all wrong.. margin-left gets set to the width of the window, line numbers aren't displayed correctly and the selection logic is off by a few lines vertically.

这是一个证明布局问题的jsfiddle：链接

Here's a jsfiddle demonstrating the layout issue: link

建议？

推荐答案

使用 @import url 在shadow DOM中导入CodeMirror的样式表：

Import CodeMirror's stylesheet inside the shadow DOM with @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>`         
}

这篇关于将CodeMirror添加到自定义元素的阴影Dom？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！