Add naive custom element support

[mereskin-zz]

JSX will render <custom-element /> as custom-element(). Rendering it as CustomElement() sounds like a better idea, because it is syntactically correct. If we operate on an assumption, that custom elements names map to React displayNames with this convention, we can build React-driven web component:

/** @jsx React.DOM */
var MyComponent = React.createClass({
  render: function(){
    return (<p>Hello {this.props.name}</p>);
  }
});

var MyComponentPrototype = Object.create(HTMLElement.prototype);

MyComponentPrototype.attachedCallback = function(){
  var props = {};
  Array.prototype.forEach.call(this.attributes, function(attr){
    props[attr.name] = attr.value;
  });
  React.renderComponent(MyComponent(props), this);
};

document.registerElement('my-component', { prototype: MyComponentPrototype });

[syranide]

It seems like a very weird convention for custom => custom but custom-element => CustomElement. I.e, the hyphen not only capitalizes the word after the hyphen (kind of makes sense), but also the capitalization of the entire name (does not make sense to me).

It also introduces amgibuity into JSX as <CustomElement /> and <custom-element /> are now identical, but neither is intuitively the right way.

[andreypopp]

I think code above works without the patch?

[sophiebits]

(Tangentially related to #1240.)

[sophiebits]

Going to close this in favor of #1539, which is a little cleaner. Thanks for sending this in!