在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上尝试过了，它完全支持web组件。

知道问题出在哪里吗？该问题是否与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>

​