将GWT小部件包装到web组件中

我正在尝试将gwt与web组件结合使用，我希望通过包装来重用一些小部件（并在微前端场景中使用它们，但每次只需一步）。我在一个虚拟项目中使用

jsinterop

，但是我不能在javascript部分使用我的小部件。我使用@JsType来共享一些类（小部件以及它们必须呈现的内容），下面是我的简单web组件的一个片段：

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

当组件连接时，我得到：

gwtjs.component.js:11 Uncaught ReferenceError: edu is not defined
at HTMLElement.connectedCallback (gwtjs.component.js:11)
at gwtjs.component.js:2

---

我正在使用

GWT2.8.1

，mojo的

GWTMaven插件2.8.1

和

true

标志来使用JsInterop。您可以找到该项目。

GWT编译器不生成JS模块，因此导入可能无法工作。在使用web组件之前，请尝试在页面中的某个位置加载nocache.js。请注意，nocache（取决于链接器）只是置换js的加载程序。因此，web组件的使用应该推迟到排列js被加载为止。@AlexanderLeshkin感谢您的回复。也许我必须从javascript网络组件转移到html网络组件，在那里同步加载.nocache.js，然后通过html导入导入整个内容。我做对了吗？@AlexanderLeshkin我想让我的web组件保持一个javascript组件（一个.js文件）。如何在我的webcomponent中加载.nocache.js文件？我尝试了“ajax”方法和“脚本标记”方法（我在存储库中添加了一个分支），但没有成功。。谢谢。您可以尝试使用SSO链接器和GWT模块描述符。在这种情况下，代码应该直接编译成nocache.js中的一个排列。但是看看代码，我认为应该做更多的努力来让它工作。您将无法将EffortTable实例附加到shadow root，因为它不是DOM元素-它是一个简单的JS对象，用于包装GWT widget。GWT编译器不生成JS模块，因此导入可能无法工作。在使用web组件之前，请尝试在页面中的某个位置加载nocache.js。请注意，nocache（取决于链接器）只是置换js的加载程序。因此，web组件的使用应该推迟到排列js被加载为止。@AlexanderLeshkin感谢您的回复。也许我必须从javascript网络组件转移到html网络组件，在那里同步加载.nocache.js，然后通过html导入导入整个内容。我做对了吗？@AlexanderLeshkin我想让我的web组件保持一个javascript组件（一个.js文件）。如何在我的webcomponent中加载.nocache.js文件？我尝试了“ajax”方法和“脚本标记”方法（我在存储库中添加了一个分支），但没有成功。。谢谢。您可以尝试使用SSO链接器和GWT模块描述符。在这种情况下，代码应该直接编译成nocache.js中的一个排列。但是看看代码，我认为应该做更多的努力来让它工作。您将无法将EffortTable实例附加到shadowroot，因为它不是DOM元素——它是一个简单的JS对象，包装了GWT小部件。