| <!DOCTYPE html> |
| <style> |
| body { |
| margin: 0; |
| } |
| </style> |
| <svg style="display:none;"> |
| <rect id="filteredRectReference" width="100" height="100" fill="red" /> |
| <filter id="filterReference"> |
| <feImage x="0" y="0" width="100" height="10" xlink:href="#filteredRectReference"/> |
| </filter> |
| </svg> |
| <template id="template"> |
| <div style="width: 100px; height: 100px; background-color: red; -webkit-filter: url(#filterReference);"></div> |
| <svg width="100" height="100"> |
| <defs> |
| <rect id="filteredRectReference" width="100" height="100" fill="green" /> |
| <filter id="filterReference"> |
| <feImage x="0" y="0" width="100" height="100" xlink:href="#filteredRectReference"/> |
| </filter> |
| </defs> |
| </svg> |
| </template> |
| <script> |
| document.body.createShadowRoot().appendChild(template.content.cloneNode(true)); |
| </script> |
