Gostaria de criar dinamicamente uma instância CodeMirror dentro de um elemento personalizado e tê-lo ao vivo no DOM da sombra do elemento. Por exemplo:

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

Isso "funciona", mas o layout está errado. A margem esquerda é ajustada para a largura da janela, os números das linhas não são exibidos corretamente e a lógica de seleção é desativada algumas linhas verticalmente.

Aqui está um jsfiddle demonstrando o problema de layout:ligação

Sugestões?