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

Question

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

javascriptweb-componentcodemirrorshadow-domcustom-element

3

我希望能在自定义元素内动态创建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演示布局问题：链接有什么建议吗？

- moof2k

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Supersharp · Accepted Answer

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

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