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