rektide/trial1.html

## trial1.html
<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta charset="utf-8"/>
        <title>ping pong component</title>
</head>
<body>

<script>
console.log("MAIN")
</script>

<element extends="div" name="x-idb-paddle">
<script>

console.log("THIS",this,window==this,this.lifecycle,this.reflectAttribute)

function explain(label){
        return function(){
                console.log(label,arguments,arguments.callee,arguments.caller)
        }
}

/* // NO .lifecycle!?!? First problem. :(
this.lifecycle({
        created: explain("created"),
        attributeChanged: explain("attr"),
        inserted: explain("inserted"),
        removed: explain("removed")
})
*/

</script>

<!--
        this renders not as a template, it just dumps to screen.
        Second problem. :(
-->
<template>
<div id="display" style="clear:both;">
        hi
        <button value="hit" id="hit"/>
</div>
</template>
</element>

<div is="idb-paddle" one="false">foo</div>
<div is="idb-paddle" one="true">foo</div>

</body>
</html>
	<?xml version="1.0"?>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8"/>
	<title>ping pong component</title>
	</head>
	<body>

	<script>
	console.log("MAIN")
	</script>

	<element extends="div" name="x-idb-paddle">
	<script>

	console.log("THIS",this,window==this,this.lifecycle,this.reflectAttribute)

	function explain(label){
	return function(){
	console.log(label,arguments,arguments.callee,arguments.caller)
	}
	}

	/* // NO .lifecycle!?!? First problem. :(
	this.lifecycle({
	created: explain("created"),
	attributeChanged: explain("attr"),
	inserted: explain("inserted"),
	removed: explain("removed")
	})
	*/

	</script>

	<!--
	this renders not as a template, it just dumps to screen.
	Second problem. :(
	-->
	<template>
	<div id="display" style="clear:both;">
	hi
	<button value="hit" id="hit"/>
	</div>
	</template>
	</element>

	<div is="idb-paddle" one="false">foo</div>
	<div is="idb-paddle" one="true">foo</div>

	</body>
	</html>