Using The Wiris Editor Within A Web Component

I have created a Web Component which hosts Wiris. However when the component is rendered the Wiris editor is (very) badly formed: You can see the issue live here. The code is as f

Solution 1:

Don't use a Shadow DOM: the styles imported with your library are not working with it.

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>