[whatwg] Proposal to extend Microdata API specification

[Егор Николаев]

Hello.

I am working on UI implimentation using Microdata API and I've found the
lack of some specific features in API:

1. itemValue for <form> elements (INPUT, TEXTAREA, PROGRESS, METER, SELECT,
OUTPUT):
It's difficult to control form's element with Microdata API. Setting
itemValue for these elements set their "textContent" value, what is a bit
messy.
My proposal is setting "value" property instead of "textContent" for them.

Example:
<form itemscope itemtype="uielements.org/Form">
  <input itemprop=name name=name />
  <textarea name=description itemprop=description></textarea>
</form>
<script>
var form = document.getItems("uielements.org/Form")[0];
form.properties["name"][0].itemValue = __currentUser.getName();
//form.name.value == __currentUser.getName()
form.properties["description"][0].itemValue =
__feedback.getDecription(); //form.description.value
== __feedback.getDecription()
form.submit();
</script>

Also for <select> element it can create multiple <option> elements:
[selectElement].itemValue = "qwe"; -> <select><option>qwe</option></select>
[selectElement].itemValue = ["qwe", "rty"]; ->
<select><option>qwe</option><option>rty</option></select>
But it's not so necessary.

2. "scopedItem" for properties.
It's difficult to take the parent `Microdata item` out of
current `Microdata item` in event listener, for example.
My proposal is to add property with the name something like "scopedItem"
that will return the parent of current `Microdata item`. For "root"
Microdata item it can return null.

It can be useful in cases such as:
<ul itemscope itemtype="uielements.org/List">
  <li itemprop=listItem itemscope>
    <span itemprop=name>Value 1</span>
    <div itemprop=menu itemscope itemtype="uielements.org/Menu"
data-event-dispatch="customEvent_Delete" data-event-listener=click>
      Delete me
    </div>
  </li>
  [...]//Some more <li itemprop=listItem data-UUID=...>
</ul>
<script>
var list = document.getItems("uielements.org/List")[0];

Array.from(list.properties["listItem"]).forEach( __InitMenuComponent );
//some function that take [itemprop=menu] and init custom event dispatcher

list.addEventListener("customEvent_Delete", function __deleteItemFunc(e) {
    var microItem = e.target;

   //the magic
   this.removeChild( microItem["scopedItem"] );

  e.stopPropagation();
})
</script>

It's just a simple example, the realworld example would be more complex.