使用新的 Vaadin 8 功能 "HTML Imports" 导入聚合物 WebComponent - 仅适用于 Google Chrome 不适用于其他浏览器

Question

我们正在尝试使用新的 Vaadin 8 功能 "HTML Import"。使用 Vaadin 8.14 和 Polymer 2.

vaadin 在“Whats new in Vaadin 8”

中提供了一个示例

它非常简单易行。我按照这些步骤操作，它立即在 Google Chrome 中工作。基本上你不会做错什么。

但是它似乎在任何不同的浏览器中都不起作用。

例如，在 firefox 中，console.log 打印它正在加载脚本，但随后没有任何反应，页面停留在加载中。

我包含了最相关的代码。

MyUI.java:

@Theme("mytheme")
public class MyUI extends UI 
{
    @Override
    protected void init(VaadinRequest vaadinRequest) 
    {
        final HorizontalLayout layout = new HorizontalLayout();
        layout.addComponents(new GameCard("♣", "k"), new GameCard("♥", "q"));
        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

GameCard.java:

@JavaScript("vaadin://bower_components/game-card/game-card.js")
@HtmlImport("vaadin://bower_components/game-card/game-card.html")
public class GameCard extends AbstractJavaScriptComponent 
{
    public GameCard(String symbol, String rank) 
    {
        callFunction("setCard", symbol, rank);
    }
}

游戏-card.js:

is2_GameCard = function () {
    var element = this.getElement();
    this.setCard = function (symbol, rank) {
        element.set("symbol", symbol);
        element.set("rank", rank);
    };
};
is2_GameCard.tag = "game-card";

Answer 1

好的，我找到了。 Firefox 需要使用 WebComponents Loader 才能与 WebCompnents 一起工作。将它包含在 UI 中就足以让它发挥作用了！

@Theme("mytheme")
@JavaScript("vaadin://bower_components/webcomponentsjs/webcomponents-loader.js")
public class MyUI extends UI 
{
    @Override
    protected void init(VaadinRequest vaadinRequest) 
    {
        final HorizontalLayout layout = new HorizontalLayout();
        layout.addComponents(new GameCard("♣", "k"), new GameCard("♥", "q"));
        setContent(layout);
    }
    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

使用新的 Vaadin 8 功能 "HTML Imports" 导入聚合物 WebComponent - 仅适用于 Google Chrome 不适用于其他浏览器

Using the new Vaadin 8 feature "HTML Imports" to import polymer WebComponent - Only works in Google Chrome not in other Browsers

vaadin

polymer