Submodules with Vaadin and Polymer

Flow
1

Hi,

we have launched our first internal project with Vaadin (Polymer) and are interested in switching our CMS to Vaadin. For this purpose we need a Notification/Dialog-Type component which allows the user to edit or select properties, basically a submodule with text fields and/or grids. Do you have any ideas on how to achieve this?
We are using Vaadin 10 with Polymer 2.

i.e.
dialog.html

<dom-module id="dialog">
    <template>
        <h1>Headline</h1>
        <p>[[text]
]</p>
    </template>
    <script>
        class DialogView extends Polymer.Element {
            static get is() {
                return 'dialog'
            }
        }
        customElements.define(DialogView.is, DialogView);
    </script>
</dom-module>

DialogViewModel.java

public interface DialogViewModel extends TemplateModel {
    void setText(String text);
}

DialogView.java

@Tag("dialog")
@HtmlImport("src/dialog.html")
public class DialogView extends PolymerTemplate<DialogViewModel> implements BeforeEnterObserver {

    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        getModel().setText("Test");
    }
}

parent.html

<dom-module id="parent-app">
	<template>
		<vaadin-dialog id="dialog" aria-label="polymer templates">
				<dialog></dialog>
		</vaadin-dialog>
		<vaadin-button on-click="dialogClicked">Show dialog</vaadin-button>
	</template>
</dom-module>

ParentView.java

@Route(value = "app/parent", layout = MainLayout.class)
@Tag("parent-app")
@HtmlImport("src/parent.html")
@Uses(DialogView.class)
public class PreviewView extends PolymerTemplate<ParentViewModel> implements HasUrlParameter<String>, BeforeEnterObserver {
...
}