React in Web Components

by codemeasandwich

HTML

<script src="https://fb.me/react-dom-0.14.3.js"></script>
<script src="http://cdn.jsdelivr.net/webcomponentsjs/0.5.2/webcomponents.min.js"></script>
<x-search initialName="dd" name="qq"></x-search>

Babel + JSX

class Hello extends React.Component {
  state = {
  	name: this.props.name
  }
  change(e) {
  console.log(e)
  	
  }
  render() {
 console.log(this)
  	const { name } = this.state;
    return (
      <div onClick={()=>alert("AA")}>
        Name: <input value={this.state.name} onChange={(e)=>console.log(e)} /><br/>
        Hello {this.state.name}!
      </div>
    );
  }
}

// ==========================================================
// ==========================================================
// ==========================================================

const proto = Object.create(HTMLElement.prototype, {
  attachedCallback: {
    value: function() {
      const mountPoint = document.createElement('span');
      this.createShadowRoot().appendChild(mountPoint);
      
      const props = Array.prototype.slice
      .call(this.attributes)
      .reduce((props, prop) => Object.assign(props,{[prop.name]: prop.value}),{});
      console.log(this.attributes,props)
      ReactDOM.render(React.createElement(Hello, props), mountPoint);
    }
  }
});
var registerElement = document.registerElement || customElements && customElements.define; 
registerElement('x-search', {prototype: proto});