Playing with native web components

Tested on chrome 36

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.6/polymer.min.js"></script>
<!-- https://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.6/polymer.min.js -->
<template id="my-component-template">
    <style>
      p {
          color: red;
      }
    </style>
    <p>A paragraph within a native web component with styles.</p>
</template>

<p>A paragraph with no styles</p>

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});
let zz = document.createElement('my-component');
document.body.appendChild(zz);