Lit Component.

Model LitElement web components with Vaadin.

Getting Started

The following example is credited to my 4 y/o son, who has much to learn.

bear-poker.ts:

@customElement('x-bear-poker')
export class BearPokerElement extends LitElement {

  @property()
  private text: String = 'You see a huge grizzly bear...';
  
  @property()
  private pokeCount: number = 0;

  protected render(): TemplateResult {
    return html`
      ${this.text}
    `;
  }
  
  public pokeIt(): void {
    this.pokeCount++;
    
    if(this.pokeCount === 1) {
      this.text = 'Why would you poke a bear?';
    } else if(this.pokeCount === 2) {
      this.text = 'You really are dumb, aren\'t you?';
    } else if(this.pokeCount === 3) {
      this.text = 'You\'re dead now. Happy?';
    } else {
      this.text = 'You can\'t poke the bear from the grave!';
    }
  }

}

BearPoker.java:

@Tag("x-bear-poker")
@JsModule("src/bear-poker.js") // Compiled into JS (obviously).
public class BearPoker extends LitComponent<BearPoker.BearPokerModel> {

  // Getters and setters call methods in the model.
  public String getText() { return getModel().getText(); }
  public void setText(String text) { getModel().setText(text); }
  
  public int getPokeCount() { return getModel().getPokeCount(); }
  
  // So do other methods.
  public void pokeIt() { getModel().pokeIt(); }

  // Here's the fancy-schmancy model declaration.
  // It is implemented through a proxy (a.k.a., magic).
  interface BearPokerModel extends LitModel {

    @LitProperty(name = "text", defaultValue = "", nullDefaultValue = true)
    String getText();
    
    @LitProperty(name = "text", defaultValue = "", nullDefaultValue = true)
    void setText(String text);
    
    @LitProperty(name = "pokeCount", defaultValue = "0")
    int getPokeCount();
    
    @LitFunction(name = "pokeIt")
    void pokeIt();
    
  }

}

How Does It Work?

One teensy scoop of LOVE a lot of MAGIC! topped with DREAMS.

License

This code is under the BSD 3-Clause.

Sponsoring

If you like my work and want to support it, please consider sponsoring me. It's how I make the time to code great things!