Form Controls for JSX

Type of Change

• New Feature Request

Summary

Would like to support these kinds of features

1. Boolean Attributes
2. Form Submission

Details

Boolean Attributes

Like a checked attribute

render() {
  const { completed, task } = this.todo;
  const checked = completed ? 'checked' : '';

  return (
    <input class="complete-todo" type="checkbox" checked/>
  );
}

To my knowledge, JSX does not support this syntax

<input type="checkbox" {isChecked} />

Form Submission

Would like be able to do something like this

class Todo extends HTMLElement {
  addTodo(e) {
    e.preventDefault();
    ...

    this.render();
  }

  render() {
    return 
      <form onsubmit={this.addTodo}>
        <input class="todo-input" type="text" placeholder="Food Shopping" required/>
        <button class="add-todo" type="button" onclick={this.addTodo}>+ Add</button>
      </form>
    );
  }
}

Right now it works, but by accident I think, and seeing this error in the console

No source files, tests, or entry points are identified. Start by reproducing the Boolean Attributes and Form Submission JSX examples, then trace how JSX is compiled and how the generated form controls behave. Done should include deliberate support for the requested behavior without the reported console error, with tests covering both features.