Integrate Monaco Editor into LitElement

Question

i try to crete a Code Playground in open-wc and would like to use Monaco Editor. the problem is, that i can't simply intregrate it. This is how i tried it and it works but the performance is horrible.

updated(changedProperties) {
    let container = this.shadowRoot.getElementById('container');
s
    function loadScript(filename, callback) {
      var fileref = document.createElement('script');
      fileref.setAttribute("type", "text/javascript");
      fileref.onload = callback;
      fileref.setAttribute("src", filename);
      if (typeof fileref != "undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref)
      }
    }

    loadScript('../node_modules/monaco-editor/min/vs/loader.js', function () {


      require.config({paths: {'vs': '../node_modules/monaco-editor/min/vs'}});

      require(['vs/editor/editor.main'], function () {

        var editor = monaco.editor.create(container, {
          value: [
            'function x() {',
            '\tconsole.log("Hello world!");',
            '}'
          ].join('\n'),
          language: 'javascript'
        });
      });

    });

  }


  render() {
    return html`
              <h2> Monaco Editor Sample</h2>
      <div id="container" style="width:100%;height:100%;border:1px solid grey"></div>

    `;
  }

Answer 1

You need to use a Light Dom to be able to use it.

You must add this to all parents

createRenderRoot() {
    return this;
}

You must take into account that the styles will stop working and you must replace them with <style> inside render()