Playing with native web components

Tested on chrome 36

HTML

<template id="my-component-template">
<style>
  :hover{opacity:0.5;}
  span{color:#bada55;}
  span:hover{opacity:0.5;}
  #oval:hover{fill:#bada55;}
</style>
<span>--My first native web component. Inspect me!--</span>

<svg width="105px" height="105px" viewBox="52 36 105 105" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <circle id="Oval" stroke="#979797" stroke-width="1" fill="#D8D8D8" fill-rule="evenodd" cx="104.5" cy="88.5" r="51.5"></circle>
</svg>
<content select="style"></content>
<content></content>
</template>

<template id="my-other-component-template">
<style>
  span{color:#c07712;}
</style>
<span>--My other Component--</span>
<content></content>
</template>

<my-component>
  <style>
    span{color:red;}
  </style>
  <my-other-component></my-other-component>
  <span>--span inside component--</span>
</my-component>
<span>--normal span--</span>
<my-other-component></my-other-component>

CSS

span{
  color:teal;
}

my-component:hover{
  opacity:0.3;
}

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 MyOtherComponent = Object.create(HTMLElement.prototype);

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

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