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 follows:

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);

and the HTML mark-up is:

<wiris-component></wiris-component>

Note that I've tried this in Chrome which does have full support for web components.

Any idea what the problem is? Is the problem related to the styling issue found in this issue?

回答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>

来源：https://stackoverflow.com/questions/45695409/using-the-wiris-editor-within-a-web-component