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>

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

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

建议？

Answer 1

使用@import url

在shadow 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？

1 个答案: