将 Monaco Editor 集成到 LitElement答案

【问题标题】：Integrate Monaco Editor into LitElement将 Monaco Editor 集成到 LitElement
【发布时间】：2020-11-09 02:44:01
【问题描述】：

我尝试在 open-wc 中创建一个 Code Playground，并希望使用 Monaco Editor。问题是，我不能简单地整合它。这是我尝试过的方法，它可以工作，但性能很糟糕。

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>

    `;
  }

【问题讨论】：

这只是我的观点，我相信很多人会同意，但避免大量外部依赖项是一种很好的做法，因为可能会降低性能和生产稳定性的不确定性。许多弹出的框架通常是由没有扎实掌握基础知识的人编写的，并且在不知不觉中编写了优化不佳的东西。
您是否尝试过跳过 Lit 层并使用原生自定义元素？几年前我就看过了：github.com/paulvarache/monaco-editor-element
不应该先更新而不是更新吗？

标签： javascript web-component shadow-dom monaco-editor lit-element

【解决方案1】：

您需要使用Light Dom 才能使用它。

您必须将此添加到所有父母

createRenderRoot() {
    return this;
}

您必须考虑到样式将停止工作，您必须将它们替换为 <style> 内 render()

【讨论】：