| <!DOCTYPE HTML> |
| <svg width="100" height="100" style="display: none;"> |
| <defs> |
| <rect id="greenSquare" width="100" height="100" fill="red" /> |
| <use id="useGreenSquare" xlink:href="#greenSquare"/> |
| </defs> |
| </svg> |
| <template id="template"> |
| <svg width="100" height="100"> |
| <defs> |
| <rect id="greenSquare" width="100" height="100" fill="green" /> |
| <use id="useGreenSquare" xlink:href="#greenSquare"/> |
| </defs> |
| <use xlink:href="#useGreenSquare"/> |
| </svg> |
| </template> |
| <script> |
| document.body.createShadowRoot().appendChild(template.content.cloneNode(true)); |
| </script> |