DotNetNerd · May 22, 2013 08:54
diff --git a/CustomElements b/CustomElements
 <html>
  
 	<body>
 		<style>
 			element {
 				display:none;
 			}
 		</style>

 		<script src="CustomElements/custom-elements.js"></script>
 		<!--
 		<script>

 			var XFooPrototype = Object.create(HTMLElement.prototype);
 			XFooPrototype.readyCallback = function() {
 			  this.textContent = "I'm an x-foo!";
 			};
 			XFooPrototype.foo = function() {
 			  console.log('foo() called');
 			};

 			var XFoo = document.register('x-foo', {
 			  prototype: XFooPrototype
 			});
 		</script>
 		-->
 		
 		<x-foo><p>Wee</p></x-foo>
 		
 		<element name="x-foo" constructor="XFoo">
 		  <section>
 		    I'm an x-foo!

 		  </section>
 		  
 		  <script>
 		    // When <element> is in document, we might run in wrong context.
 		    // Only do work when this == <element>.
 		    if (this !== window) {
 		      var section = this.querySelector('section');

 		      // Has built-in 'window' protection.
 		      this.register({
 		        prototype: {
 		          readyCallback: function() {
 		            this.innerHTML = section.innerHTML;
 		          },
 		          foo: function() {
 		            console.log('foo() called');
 		          }
 		        }
 		     });
 		    }

 		    

 		 
 		  </script>
 		</element>			
 		

 		<script>
 		  // hide body to prevent FOUC
 		  document.body.style.opacity = 0;
 		  window.addEventListener('WebComponentsReady', function() {
 		    // show body now that everything is ready
 		    document.body.style.opacity = 1;

 		    var shadow = document.querySelector("x-foo");
 				    shadow.foo();


 			var xFoo = new XFoo();
 			document.body.appendChild(xFoo);

 			var xFoo2 = document.createElement('x-foo');
 			xFoo2.foo();
 		  });
 		</script>
 		

 		
 	</body>
 </html>
	<html>

	<body>
	<style>
	element {
	display:none;
	}
	</style>

	<script src="CustomElements/custom-elements.js"></script>
	<!--
	<script>

	var XFooPrototype = Object.create(HTMLElement.prototype);
	XFooPrototype.readyCallback = function() {
	this.textContent = "I'm an x-foo!";
	};
	XFooPrototype.foo = function() {
	console.log('foo() called');
	};

	var XFoo = document.register('x-foo', {
	prototype: XFooPrototype
	});
	</script>
	-->

	<x-foo><p>Wee</p></x-foo>

	<element name="x-foo" constructor="XFoo">
	<section>
	I'm an x-foo!

	</section>

	<script>
	// When <element> is in document, we might run in wrong context.
	// Only do work when this == <element>.
	if (this !== window) {
	var section = this.querySelector('section');

	// Has built-in 'window' protection.
	this.register({
	prototype: {
	readyCallback: function() {
	this.innerHTML = section.innerHTML;
	},
	foo: function() {
	console.log('foo() called');
	}
	}
	});
	}




	</script>
	</element>


	<script>
	// hide body to prevent FOUC
	document.body.style.opacity = 0;
	window.addEventListener('WebComponentsReady', function() {
	// show body now that everything is ready
	document.body.style.opacity = 1;

	var shadow = document.querySelector("x-foo");
	shadow.foo();


	var xFoo = new XFoo();
	document.body.appendChild(xFoo);

	var xFoo2 = document.createElement('x-foo');
	xFoo2.foo();
	});
	</script>



	</body>
	</html>