Use of vaadin html tags on html template files

Hello Everyone,

I just started testing Vaadin 10 and I like the modularity that can be used with Polymer. So I created a Template using vaadin tags (like ), call it from my MainView which extends “VerticalLayout” and it just shows the text that is suppose to go into each vaadin component. But after adding from my MainView any vaadin component (like a button) it will render properly all the vaadin tags inside my HTML template. Is it an expected functionality?

Here is my simple code that displays just text on the frontend:

MainView

@HtmlImport("styles/shared-styles.html")
@Route("")
public class MainView extends VerticalLayout {
	public MainView(@Autowired ExampleTemplate template) {		
		add(template);
		setClassName("main-layout");
	}
}

ExampleTemplate

@Tag("example-template")
@HtmlImport("src/example-template.html")
@SpringComponent
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
public class ExampleTemplate extends PolymerTemplate<ExampleTemplate.ExampleModel>{
	public interface ExampleModel extends TemplateModel {
	}
	
	public ExampleTemplate() {		
	}
}

example-template.html

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="example-template">
	<template>
		<vaadin-button>Click Again</vaadin-button>		
		<vaadin-label>Im a Label</vaadin-label> 
	</template>
	<script>
	class ExampleTemplate extends Polymer.Element {
        static get is() {
            return 'example-template'
        }
    }
    customElements.define(ExampleTemplate.is, ExampleTemplate);
	</script>
</dom-module>

shared-style.html

<custom-style>
	<style>
		.main-layout {
			padding: 20px;
		}
	</style>
</custom-style>

I just added these lines on the html template and it rendered properly the vaadin tags:

<link rel="import" href="../bower_components/vaadin-icons/vaadin-icons.html">
<link rel="import" href="../bower_components/vaadin-text-field/src/vaadin-text-field.html">
<link rel="import" href="../bower_components/vaadin-text-field/src/vaadin-password-field.html">
<link rel="import" href="../bower_components/vaadin-button/src/vaadin-button.html">