BlackHC · October 2, 2014 11:19
diff --git a/dabblet.css b/dabblet.css
 /**
 * The first commented line is your dabblet’s title
 */

 background: #f06;
 background: linear-gradient(45deg, #f06, yellow);
 min-height: 100%;
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <body>
 <template id="element-template">
  <style>
    p { color: orange; }
  </style>
  <p>I'm in Shadow DOM. My markup was stamped from a template.</p>
 </template>

 <script>
 var proto = Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var t = document.querySelector('#element-template');
      var clone = document.importNode(t.content, true);
      this.createShadowRoot().appendChild(clone);
    }
  }
 });
 document.registerElement('element', {prototype: proto});
 </script>

 <element/>
 </body>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
	/**
	* The first commented line is your dabblet’s title
	*/

	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	<!-- content to be placed inside <body>…</body> -->
	<body>
	<template id="element-template">
	<style>
	p { color: orange; }
	</style>
	<p>I'm in Shadow DOM. My markup was stamped from a template.</p>
	</template>

	<script>
	var proto = Object.create(HTMLElement.prototype, {
	createdCallback: {
	value: function() {
	var t = document.querySelector('#element-template');
	var clone = document.importNode(t.content, true);
	this.createShadowRoot().appendChild(clone);
	}
	}
	});
	document.registerElement('element', {prototype: proto});
	</script>

	<element/>
	</body>