I’m using vaadin 12 and writing custom polymer components.
On my main layout I have @Theme(Material.class)
I have a component that has a vaadin-button and a vaadin-text-field.
The vaadin-button is being correctly themed however the vaadin-text-field is not been themed.
If I change my text field import from:
<link rel="import" href="/frontend/bower_components/vaadin-text-field/src/vaadin-text-field.html">
to
<link rel="import" href="/frontend/bower_components/vaadin-text-field/theme/material/vaadin-text-field.html">
Then the text field is correctly themed but this seems wrong.
The component:
<link rel="import"
href="/frontend/bower_components/polymer/polymer.html">
<link rel="import"
href="/frontend/bower_components/vaadin-text-field/theme/material/vaadin-text-field.html">
<link rel="import"
href="/frontend/bower_components/vaadin-button/src/vaadin-button.html">
<dom-module id="reg-business-name"> <template>
<style include="shared-styles">
</style>
<div>
<p>Business Name</p>
<vaadin-button theme="contained">hi</vaadin-button>
<vaadin-text-field label="Business Name"
placeholder="Enter your business name"></vaadin-text-field>
<br></br>
</div>
</template> <script>
class BusinessName extends Polymer.Element {
static get is() {
return 'reg-business-name';
}
static get properties() {
return {
// Declare your properties here.
};
}
}
customElements.define(BusinessName.is, BusinessName);
</script> </dom-module>