CodeMirror zum Schattendom des benutzerdefinierten Elements hinzufügen?

Question

Ich möchte dynamisch eine CodeMirror-Instanz in einem benutzerdefinierten Element erstellen und sie im Shadow-DOM des Elements verfügbar machen. Zum Beispiel:

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

Dieses „Werk“ aber das Layout ist alles falsch .. margin-left wird auf die Breite des Fensters gesetzt, Zeilennummern sind nicht korrekt und die Auswahllogik ist angezeigt durch ein paar off Zeilen vertikal.

Hier ist ein jsfiddle zeigt das Layout Ausgabe: link

Verbesserungsvorschläge?

Answer 1

Import Codemirror Sheet innerhalb des Schattens DOM mit @import url:

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