<head>
<style type="text/css">
rect {
  fill: red;
}
</style>
<script type="text/javascript">//<![CDATA[ 
window.onload=function(){
document.registerElement("x-rect", {
  extends: "g",
  prototype: {
    __proto__: SVGRectElement.prototype,
    createdCallback: function() {
      this.attachShadow({mode: 'open'});
      this.shadowRoot.innerHTML =
        '<style>rect { fill: blue; }</style>' +
        '<rect width="100" height="100" x="0" y="0"></rect>';  
    }
  }
});
}//]]>  
</script>
</head>
<body>
  <svg width="200" height="200" viewBox="0 0 200 200">
  <rect x="0" y="0" width="200" height="200"></rect>
  <g is="x-rect"></g>
</svg>
</body>