Me gustaría crear dinámicamente una instancia de CodeMirror dentro de un elemento personalizado y hacer que viva dentro del Shadow DOM del elemento. Por ejemplo:

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

Esto "funciona", pero el diseño es incorrecto ... el margen izquierdo se ajusta al ancho de la ventana, los números de línea no se muestran correctamente y la lógica de selección está apagada verticalmente.

Aquí hay un jsfiddle que demuestra el problema de diseño:enlazar

Sugerencias?