사용자 지정 요소의 그림자 돔에 CodeMirror 추가?

Question

사용자 정의 요소 내에 CodeMirror 인스턴스를 동적으로 만들고 요소의 그림자 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> 

이 "작품"하지만 레이아웃이 모든 잘못 .. 마진 왼쪽은 윈도우의 너비로 설정됩니다되어, 줄 번호가 제대로 표시되지 않고 선택 로직은 몇 가지로 꺼져 수직으로 선. 여기

는 jsfiddle은 레이아웃 문제를 보여주는 것 : link

제안? @import url와 그림자 DOM 내부

Answer 1

가져 오기 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>`   
}