LitWidget

[ ENGLISH | RUSSIAN ]

The LitWidget widget extends LitElement and gives you the ability to declaratively bind component class properties to the component's html child elements, as well as add event handlers to them. This binding greatly simplifies working with the Light DOM. A similar pattern is implemented in Github/Catalyst and Stimulus.js.

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

@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>

Documentation

See DOCUMENTATION.md

License

This project is licensed under the terms of the BSD 3-Clause license.