LitWidget

Declarative binding to child elements for LitElement like Github/Catalyst and Stimulus.js.

JavaScript

HTML

import { LitWidget, target, onEvent } from '@simulacron/lit-widget';
import { customElement } from 'lit/decorators.js';

@customElement('w-hello')
class HelloWidget extends LitWidget {

  @target input

  @target output

  @onEvent('button', 'click')
  greet() {
    this.output.textContent = `Hello, ${this.input.value}!`;
  }

}

<w-hello>
  <input data-target="w-hello.input" type="text" />

  <button data-target="w-hello.button">
    Greet
  </button>

  <span data-target="w-hello.output"></span>
</w-hello>