mweststrate/mobx-webcomponent.html

## mobx-webcomponent.html
<!DOCTYPE html>
<html>
    <head>
    <script src="https://unpkg.com/mobx@2.6.0/lib/mobx.umd.js"></script>
    <script>
        var MobxDemo = Object.create(HTMLElement.prototype);
        MobxDemo.attachedCallback = function() {
            var state = mobx.observable({
                counter : parseInt(this.getAttribute("counter"))
             })

            var div = document.createElement("div")
            function render () {
                div.innerHTML = "Counter: " + state.counter
            }

            div.onclick = function() {
                state.counter += 1
            }

            var stopAutoRender = mobx.autorun(render)
            this.detachedCallback = stopAutoRender
            this.appendChild(div)
        };

        document.registerElement('mobx-demo', { prototype: MobxDemo });
    </script>
    <body>
        <mobx-demo counter="17" />

    </body>
</body>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://unpkg.com/mobx@2.6.0/lib/mobx.umd.js"></script>
	<script>
	var MobxDemo = Object.create(HTMLElement.prototype);
	MobxDemo.attachedCallback = function() {
	var state = mobx.observable({
	counter : parseInt(this.getAttribute("counter"))
	})

	var div = document.createElement("div")
	function render () {
	div.innerHTML = "Counter: " + state.counter
	}

	div.onclick = function() {
	state.counter += 1
	}

	var stopAutoRender = mobx.autorun(render)
	this.detachedCallback = stopAutoRender
	this.appendChild(div)
	};

	document.registerElement('mobx-demo', { prototype: MobxDemo });
	</script>
	<body>
	<mobx-demo counter="17" />

	</body>
	</body>