| <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> |
