Refs and forms

Events

An attribute named on plus the event name adds a listener: onClick, onInput, onSubmit, onKeyDown. The name is lowercased, so onDblClick listens to dblclick.

Refs

createRef() gives an object whose current is the element after render. ref also takes a callback.

private input = createRef<HTMLInputElement>();

html`<input ref=${this.input} />`;
html`<canvas ref=${(el) => this.draw(el)}></canvas>`;

Forms

Keep state in signals and read the field in its event. To reset a field, set its value through a ref. Binding value=${() => ...} sets the attribute, which the browser ignores once someone has typed.

Attributes

• A function binds the attribute: disabled=${() => busy.value}.
• true sets an empty attribute and false removes it. For ARIA states, pass a string: aria-expanded=${() => String(open.value)}.
• style takes a string or an object.