Использование редактора Wiris в веб-компоненте

Question

Я создал веб-компонент, который содержит Wiris. Однако при визуализации компонента редактор Wiris (очень) плохо сформирован:

Вы можете увидеть проблему в прямом эфире здесь.

Код выглядит следующим образом:

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, который имеет полную поддержку веб-компонентов.

Есть идеи, в чем проблема? Проблема, связанная с проблемой стиля, найденной в этой проблеме?

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>