Simplify markup for select elements

[awidener3]

Investigate ways to reduce the markup needed when writing select elements when the value exists in the model.

For example, perhaps a setup below will take the <select> element value and automatically apply the selected attribute to a matching option element.

// data passed to teddy template
const model = {
  foo: 'b'
}

<!-- teddy template -->
<select selected-value="{foo}" ...>
  <option value="a">A</option>
  <option value="b">B</option> <!-- this receives the "selected" attribute on render -->
  <option value="c">C</option>
</select>

<!-- rendered result -->
<select ...>
  <option value="a">A</option>
  <option value="b" selected>B</option>
  <option value="c">C</option>
</select>

The value attribute would also need to be removed from the <select> element, since it is not a valid attribute for the element.

It could also be extended to looped options:

const model = {
  foo: ['a', 'b', 'c'],
  selected: 'b'
}

<select selected-value="{selected}">
  <loop through="foo" val="letter">
    <option value="{letter}">{letter}</option>
  </loop>
</select>

For reference, this is how the first example is currently achieved:

<select ...>
  <option value="a" if-foo="a" true="selected">A</option>
  <option value="b" if-foo="b" true="selected">B</option>
  <option value="c" if-foo="c" true="selected">C</option>
</select>

Needs to handle checkboxes and radio buttons too though which is a trickier problem.