How to integrate a polymer web component (app-layout by PolymerElements).

Flow
1

Hello.
I try to integrate this web component:
https://vaadin.com/directory/component/polymerelementsapp-layout1 to my vaadin application.

I have read this document https://vaadin.com/docs/v13/flow/web-components/integrating-a-web-component.html and have done as is written there.

But when I run project I see the empty my page.
What did I wrong?

compile 'org.webjars.npm:polymer__app-layout:3.0.1'

@Tag("app-layout")
@HtmlImport("bower_components/polymer__app-layout/3.0.1/demo/index.html")
public class PolymerAppLayout extends Component {
}

@Route("")
public class MainView extends VerticalLayout {
    public MainView() {
        add(new PolymerAppLayout());
    }
}
2

Hard to say exactly without seeing the full code, but I see a couple of problems from what you’ve shared:

  • you’re using npm and Polymer 3 (which is needed by app-layout 3.0.1) with Vaadin 13, which won’t work
  • "bower_components/polymer__app-layout/3.0.1/demo/index.html" is probably not a web component but a demo page