在Web组件中使用Wiris编辑器

Question

我创建了一个托管Wiris的Web组件。但是，当渲染组件时，Wiris编辑器（非常）形成错误：

您可以直接查看问题here。

代码如下：

class WirisComponent extends HTMLElement {
 constructor() {
  // Always call super first in constructor
  super();

  // Create a shadow root
  var shadow = this.attachShadow( { mode: 'open' } );

  // Create a div to host the Wiris editor
  var div = document.createElement('div');
  div.id = 'editorContainer';

  var wirisDefaultConfig = {
    'language': 'en'
  };

  var editor = com.wiris.jsEditor.JsEditor.newInstance(wirisDefaultConfig);

  // Insert the Wiris instance into the div
  editor.insertInto(div);      

  // Append it to the shadow route
  shadow.appendChild(div);
 }
}

// Define the new element
customElements.define('wiris-component', WirisComponent);

并且HTML标记为：

<wiris-component></wiris-component>

请注意，我在Chrome中尝试过这一点，它完全支持网络组件。

知道问题是什么吗？问题是否与this问题中的样式问题有关？

Answer 1

不要使用Shadow DOM：随库导入的样式不能使用它。

class WirisComponent extends HTMLElement {
  connectedCallback() {
    var wirisDefaultConfig = {
      'language': 'en'
    };

    var editor = com.wiris.jsEditor.JsEditor.newInstance(wirisDefaultConfig);
    editor.insertInto(this);
  }
}

// Define the new element
customElements.define('wiris-component', WirisComponent);

<script src="https://www.wiris.net/demo/editor/editor"></script>
<wiris-component></wiris-component>