将 CodeMirror 添加到自定义元素的阴影 Dom？

Question

我想在自定义元素中动态创建一个 CodeMirror 实例，并让它存在于元素的影子中 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>

这个 "works" 但是布局完全错误.. margin-left 被设置为 window 的宽度，行号显示不正确并且选择逻辑被 a 关闭垂直几行。

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

建议？

Answer 1

使用 @import url:

在阴影 DOM 内导入 CodeMirror 的样式表

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？

Adding CodeMirror to Shadow Dom of Custom Element?

javascript

web-component

codemirror

shadow-dom

custom-element