使用新的Vaadin 8功能「HTML導入」導入聚合物WebComponent - 只能在谷歌瀏覽器不能在其他瀏覽器

Question

我們正在嘗試使用新的Vaadin 8功能「HTML導入」。使用Vaadin 8.14和聚合物2

一個例子是在「Whats new in Vaadin 8」

vaadin提供它是非常簡單的，易於實現。我遵循了這些步驟，並立即在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 { 
    } 
}