Annotation Type Id

@Retention(RUNTIME)
@Target(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;
 }
 
 

 
    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");
      }
 }

 
 

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

Since:

Author:

Vaadin Ltd