com.vaadin.flow.component.template

Annotation Type Id

@Retention(value=RUNTIME)
 @Target(value=FIELD)
 @Documented
public @interface Id

Defines the id of a component or an element to map to inside a lit template.

Use this annotation with an identifier of the element which you want to refer to as a value for a field inside your LitTemplate class.

Here is a Java sample:

 
 @Tag("details")
 public class Details extends LitTemplate {

      @Id("name")
      private Div nestedDiv;

      @Id("email")
      private Element nestedElement;
 }
 
 

This code may be used with the following template:

 
    render(){
     return html`
     <div id='name'>
      <label>Text</label>
     </div>
     <input type="text" id='email'></div">
     `;
   ....
 
 

It's important to understand that the element's hierarchical structure for the element injected via @Id is not populated and not available on the server side (it's not known). It means that nestedDiv field value which is a Div component doesn't have any child on the server side. Attribute values declared on the client side are reflected to the server side as property values or attribute values.

You still may use Component's or Element's mutation methods for the injected element from the server side though. E.g. you may add a child or set attribute/property value. Such children will be available in the element's hierarchy in the same way as for a regular element.

An attribute/property value set using server side API methods overrides the values used in the template. If the attribute/property value is not explicitly set on the server side then the template value is used. In this example:

 
 @Tag("my-layout")
 public class Layout extends LitTemplate {

      @Id("container")
      private MyComponent container;
 }
 
 @Tag("my-component")
 public class MyComponent extends LitTemplate {

      public MyComponent(){
          getElement().setProperty("name","Joe");
      }
 }
 
 
 

the container field has "name" property value "Joe" (even though it has another value declared in the template) and it has "version" value "1.0" with the following template:

 
    render(){
     return html`
      <my-component id='container' name='Doe' version='1.0' ></my-component>
     `;
 
 

Since:

Author:

Vaadin Ltd

Optional Element Summary

Optional Elements

Modifier and Type	Optional Element and Description
String	value The id of the element to map to.

Element Detail

value

public abstract String value

The id of the element to map to. When empty, the name of the field is used instead.

Returns:

the id of the element to map to

Default:

""