//js file of the component, very plain just containing a grid
class SomeComponent extends PolymerElement {

    static get template() {
        return html`
            <style include="shared-styles">
                :host {
                    display: block;
                    height: 100%;
                }
            </style>
<vaadin-vertical-layout>
    <vaadin-grid id=grid></vaadin-grid>
</vaadin-vertical-layout>
        `;
    }

    static get is() {
        return 'some-component';
    }

    static get properties() {
        return {
           
        };
    }
}

customElements.define(SomeComponent.is, SomeComponent);
//end of js file


//component with a breaking grid:
@Tag("some-component")
@JsModule("./src/components/some-component.js")
@SpringComponent
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
public class SomeComponent extends PolymerTemplate<SomeComponentModel> {

    @Id("grid") //grid is defined in the js file
    private Grid<SomeClass> grid;

    protected final ListDataProvider<SomeClass> provider = DataProvider.ofCollection(new ArrayList<>());


   public SomeComponent() {
     //it seems to happen with multiple grids, some are really simple like this, some are using TemplateRenderer.of(<htmlCode>)
       grid.addColumn(SomeClass::getName);
   }

   public void clear() { //clear all data
      provider.getItems().clear();
      provider.refreshAll();
   }

   public void addData(SomeClass some) { //example of adding some data to provider
      provider.getItems().add(some);
      provider.refreshAll();
   }


    public interface SomeComponentModel extends TemplateModel {
        //nothing interesting here
    }
}


//a simple view containing above component in a dialog

@Tag("some-view")
@JsModule("./src/views/some-view.js")
@Route(value = someRoute)
public class SomeView extends extends PolymerTemplate<SomeViewModel> {

  private final SomeComponent component;

   Dialog dialog = new Dialog();

   @AutoWired
   public someView(SomeComponent component) {
      this.component = component,
      dialog.add(component);
   }

//imagine user can call this methods using a button or something
  public void open() {
      dialog.open();
      component.addData(someData);
   }

   public void close() {
      component.clear();
      dialog.close();
   }

    public interface SomeViewModel extends TemplateModel {
        //nothing interesting here
    }
}