title: Wrap a GWT widget in a web component
body: <p>I am trying to use gwt with web component, I'd like to reuse some widgets by wrapping them (and use them in a microfrontend scenario but one step a time). I am using <code>jsinterop</code> in a dummy project but I can't use my widget in the javascript part. I use @JsType to share some classes (widgets and what they must render), here is a snippet of my simple web component:</p>
  
  <pre><code>import './gwtjs/gwtjs.nocache.js';
  window.customElements.define('effort-component', class EffortComponent extends HTMLElement {
    constructor() {
      super();
      this._shadowRoot = this.attachShadow({ 'mode': 'open' });
    }
  
    connectedCallback() {
      console.log('connected!');
  
      var actv1 = new edu.pezzati.gwtjs.client.provided.model.Activity;
      ...
      var model = [];
      model[0] = [actv1, actv2];
      model[1] = [eff1, eff2, eff3];
  
      var effortTable = edu.pezzati.gwtjs.client.provided.EffortTable();
      this._shadowRoot.appendChild(effortTable);
      effortTable.refresh(model);
    }
  });
  </code></pre>
  
  <p>when component is connected I get:</p>
  
  <pre><code>gwtjs.component.js:11 Uncaught ReferenceError: edu is not defined
  at HTMLElement.connectedCallback (gwtjs.component.js:11)
  at gwtjs.component.js:2
  </code></pre>
  
  <p>I am using <code>gwt 2.8.1</code>, mojo's <code>gwt-maven-plugin 2.8.1</code> with the <code>&lt;generateJsInteropExports&gt;true&lt;/generateJsInteropExports&gt;</code> flag to use JsInterop. You can find the project <a href="https://github.com/fpezzati/gwtjs" rel="nofollow noreferrer">here</a>.</p>