select: define corner case behavior for <selectedoption>

[sorvell]

There are a lot of weird things you can do with the <selectedoption> element. These should at least all have well-defined behavior and not produce unexpected errors or hang the browser.

Some cases to consider, definitely not an exhaustive list:

1. Child content, especially when there is no select.selectedOption

<selectedoption>some stuff</selectedoption>

2. As descendant of itself

<selectedoption>
  <selectedoption></selectedoption>
</selectedoption>

3. As descendant of <option>

<option>
  1 <selectedoption></selectedoption>
</option>

4. When targeted by multiple select's

<selectedoption id="shared"></selectedoption>
<select selectedoptionelement="shared">...</select>
<select selectedoptionelement="shared">...</select>

or

<select selectedoptionelement="shared">...</select>
<select>
  <selectedoption id="shared"></selectedoption>
</select>

[josepharhar]

1. Child content, especially when there is no select.selectedOption

You mean if the author puts stuff in there? It's well defined - when the next clone happens due to select.value being assigned to or the user chooses a different option, then the contents will be replaced by the browser.

2. As descendant of itself

If a selectedoption has an ancestor selectedoption, then it will become disabled. It will also be removed by the browser whenever cloning occurs in the ancestor selectedoption.

3. As descendant of option

If a selectedoption has an ancestor option, then it will become disabled - I haven't implemented this yet, it currently hangs the browser :)

4. When targeted by multiple select's

Each select will clone into that selectedoption whenever either one of them decides to do a clone. This seems intuitive to me in the odd case that you decide to do this.