Playing with native web components

Tested on chrome 36

by Matt Howey

HTML

<template id="my-input-template">
    <span>My first native web component. Inspect me!</span>
</template>
<template id="my-component-template">
  <div>
    <form name="inputForm">
      <input type="text" />
      <input type="button" value="submit" />  
    </form>
  </div>
</template>


<my-component></my-component>

JavaScript

// Creating a native web component...
var MyComponent = Object.create(HTMLElement.prototype);

MyComponent.createdCallback = function(){
    
    var template = document.querySelector('#my-component-template'),
        shadowRoot = this.createShadowRoot(),
        clone = template.content.cloneNode(true)
    
    shadowRoot.appendChild(clone);
};

document.registerElement('my-component', {prototype: MyComponent});

var MyInputComponent = Object.create(HTMLElement.prototype);

MyInputComponent.createdCallback = function() {
	 var template = document.querySelector('#my-input-template'),
        shadowRoot = this.createShadowRoot(),
        clone = template.content.cloneNode(true);
    
    shadowRoot.appendChild(clone);
}

//document.registerElement('my-input-component'), {prototype: MyInputComponent});