Creating a custom element and polyfill css with Polymer platform.js

x-foo.html

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.1/platform.js"></script>

<x-foo red></x-foo>

<template id="foo">
  <style>
    :host[red] {background-color: red;}
  </style>
  foo
</template>
<script>
  var XFoo = function(){
    var template =  document.querySelector("#foo");
    this.createShadowRoot();
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  XFoo.prototype = Object.create(HTMLElement.prototype);
  XFoo.prototype.createdCallback = XFoo
  XFoo = document.registerElement('x-foo', XFoo);

  if(Platform.ShadowCSS) {
    var frag =  document.querySelector("#foo").content.cloneNode(true);
    Platform.ShadowCSS.shimStyling(frag, "x-foo", "");
  }
</script>