public
Created

Web Components attempt

  • Download Gist
trial1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
<?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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.