使用新的Vaadin 8功能；“HTML导入”；要导入polymer WebComponent-仅适用于Google Chrome，而不适用于其他浏览器

我们正在尝试使用新的Vaadin8功能“HTML导入”。使用Vaadin 8.14和聚合物2

vaadin在“”中提供了一个示例

它非常简单，易于实现。我遵循这些步骤，它立即在谷歌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);
    }
}

game-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";

---

好吧，我发现了。Firefox需要使用WebComponents加载程序来处理WebComponents。在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 {
    }
}

---

好吧，我发现了。Firefox需要使用WebComponents加载程序来处理WebComponents。在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 {
    }
}

---

此页面上有一个浏览器支持位，仅闪烁浏览器本机支持HTML导入。此页面上有一个浏览器支持位，仅闪烁浏览器本机支持HTML导入。