@Id is not supported with Vaadin 14 NPM mode

[johndevs]

Desktop:

• OS: All supported
• JDK version: All supported
• Gradle version: All supported
• Vaadin Plugin version: 1.3.beta1

Describe the bug

Right now when trying to render the following polymer template the component does not render:

@Tag("hello-button")
@JsModule("./hello-button.js")
public class HelloButton extends PolymerTemplate<HelloButton.HelloButtonModel> {

    @Id("caption")
    private Element caption;
}

If you remove the @Id annotation then the template will render OK. This is most likely some client side issue with the Vaadin Flow framework where some formatting is preventing the rendering.

Due to this if the project contains @Id tags the plugin will fail the build process.

To Reproduce Steps to reproduce the behavior:

1. Download the example project from here
2. Run ./gradle vaadinTranspileDependencies --ignore-id-usage jettyRun
3. Navigate to http://localhost:8080/<project name>
4. The page is blank

Expected behavior The opened page displays "Hello world" (renders the shadow dom)

Additional context The issue is most likely either in how the shadow dom content is handled when the @Id tag is present on the server side, or then a bug in client side shadow dom rendering.

[johndevs]

This issue is split out for further investigation from #240

[johndevs]

For the bounty to be payed out the following needs to be provided:

1) A detailed description of what the issue is 2) A proposed fix either to Vaadin Flow framework or to the gradle plugin

Only once the issue is fixed will the bounty be payed out.