title | order | layout |
---|---|---|
Creating an In-project Web Component |
20 |
page |
In the majority of circumstances, the best way to integrate a public Web Component into Vaadin, is to follow the steps in Integrating a Web component.
As an alternative, if you want to create a UI component that is specific to your application, you can integrate and develop the component within your application project.
In this section, we demonstrate how to do this using the Vaadin Base Starter.
The first step is to create the JavaScript Lit template in frontend/my-test-element/my-test-element.js
Example: Defining the my-test-element
JavaScript template.
import {html, LitElement} from 'lit-element';
class MyTestElement extends LitElement {
render() {
return html`
<h2>Hello</h2>
`;
}
}
window.customElements.define('my-test-element', MyTestElement);
This works in exactly the same way as described in Creating Java API for a Web Component, except that the static files are loaded from your project. You can easily modify them while creating the Java API.
Example: Defining the matching template class.
@Tag("my-test-element")
@JsModule("my-test-element/my-test-element.js")
public class MyTest extends Component {
public MyTest(String prop1) {
getElement().setProperty("prop1", prop1);
}
}