| <!DOCTYPE HTML> |
| <script> |
| document.registerElement("x-g", { extends: "g", prototype: { |
| __proto__: SVGGElement.prototype, |
| createdCallback: function() { |
| var greenBox = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); |
| greenBox.setAttribute('width', '20'); |
| greenBox.setAttribute('height', '20'); |
| greenBox.setAttribute('fill', 'green'); |
| this.createShadowRoot().appendChild(greenBox); |
| } |
| } |
| }); |
| |
| document.registerElement("x-green", { extends: "g", prototype: { |
| __proto__: SVGGElement.prototype, |
| createdCallback: function() { |
| var shadow = this.createShadowRoot(); |
| var style = document.createElement('style'); |
| style.appendChild(document.createTextNode(':host::shadow * { fill: green; }')); |
| shadow.appendChild(style); |
| var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); |
| rect.setAttribute('width', '20'); |
| rect.setAttribute('height', '20'); |
| shadow.appendChild(rect); |
| } |
| } |
| }); |
| |
| document.registerElement("x-pass", { extends: "text", prototype: { |
| __proto__: SVGTextElement.prototype, |
| createdCallback: function() { |
| this.innerHTML = this.innerHTML.replace('FAIL', 'PASS'); |
| } |
| } |
| }); |
| </script> |
| |
| <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> |
| <g is="x-g"> |
| <rect width="100" height="100" fill="red"></rect> |
| </g> |
| </svg><br> |
| |
| <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> |
| <defs> |
| <rect id="use-green" width="20" height="20" fill="green"></rect> |
| </defs> |
| <use xlink:href="#use-green"></use> |
| </svg><br> |
| |
| <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> |
| <g is="x-green"> |
| <rect width="100" height="100" fill="red"></rect> |
| </g> |
| </svg><br> |
| |
| <svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg"> |
| <text is="x-pass" font-size="10px" y="20">FAIL</text> |
| </svg> |