daog1/hello.html

## hello.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/dist/webcomponents.js"></script>
    <script src="/static/dist/react.js"></script>
    <script src="/static/dist/react-dom.js"></script>
    <script src="/static/dist/react-with-addons.js"></script>
    <script src="/static/dist/reactive-elements.js"></script>
    <script src="/static/dist/browser.min.js"></script>
</head>
<script type="text/babel">
          var MyComponent = React.createClass({
		  handleClick: function() {
              //console.log("test");
		      this.refs.myTextInput.focus();
		  },
		  render: function() {
		    return (
		      <div>
		        <input type="text" ref="myTextInput" />
		        <input type="button" value="Focus the text input" onClick={this.handleClick} />
		      </div>
		    );
		  }
		});
          /*
       var proto2 = Object.create(HTMLElement.prototype, {
           handleClick: function() {
               console.log("test");
           },
        createdCallback: {
          value: function() {
            var mountPoint = document.createElement ('div');
            this.createShadowRoot().appendChild(mountPoint);

            //var name = this.getAttribute('name');
            //var url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
              console.log("hello");
            ReactDOM.render(<MyComponent/>, mountPoint);
          }
        }
      });*/
          document.registerReact('yx-input', MyComponent);
    </script>
<body>
<p>dddd</p>
<div id="container"></div>
<yx-input />
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="/static/dist/webcomponents.js"></script>
	<script src="/static/dist/react.js"></script>
	<script src="/static/dist/react-dom.js"></script>
	<script src="/static/dist/react-with-addons.js"></script>
	<script src="/static/dist/reactive-elements.js"></script>
	<script src="/static/dist/browser.min.js"></script>
	</head>
	<script type="text/babel">
	var MyComponent = React.createClass({
	handleClick: function() {
	//console.log("test");
	this.refs.myTextInput.focus();
	},
	render: function() {
	return (
	<div>
	<input type="text" ref="myTextInput" />
	<input type="button" value="Focus the text input" onClick={this.handleClick} />
	</div>
	);
	}
	});
	/*
	var proto2 = Object.create(HTMLElement.prototype, {
	handleClick: function() {
	console.log("test");
	},
	createdCallback: {
	value: function() {
	var mountPoint = document.createElement ('div');
	this.createShadowRoot().appendChild(mountPoint);

	//var name = this.getAttribute('name');
	//var url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
	console.log("hello");
	ReactDOM.render(<MyComponent/>, mountPoint);
	}
	}
	});*/
	document.registerReact('yx-input', MyComponent);
	</script>
	<body>
	<p>dddd</p>
	<div id="container"></div>
	<yx-input />
	</body>
	</html>