0

I have created a Web Component which hosts Wiris. However when the component is rendered the Wiris editor is (very) badly formed:

enter image description here

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?

Ben Smith
  • 19,589
  • 6
  • 65
  • 93

1 Answers1

0

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>
Supersharp
  • 29,002
  • 9
  • 92
  • 134
  • Unfortunately I need to use the shadow DOM to encapsulate the web component's DOM and CSS from the hosts (the web component will not only contain Wiris). Whats odd is that the latest version of Chrome has full support for Web Components so I'd expect Wiris and it's styles to "play nicely" with the web component. – Ben Smith Aug 15 '17 at 22:45
  • Then you should try a method like this: https://stackoverflow.com/a/42758748/4600982 but I don't think it can work wth wiris – Supersharp Aug 16 '17 at 07:05
  • Thanks @Supersharp. I think you're right, the way that Wiris "ships" their editor is not very flexible i.e. having to reference a URL instead of being able to import a module and the other constituent parts e,g, styles. It'll be interesting to see what Wiris say. – Ben Smith Aug 16 '17 at 08:17