<!doctype html> <svg style="position: absolute; width: 0; height: 0"> <defs> <pattern id="rect" width="100" height="100"> <rect fill="red" width="100" height="100" /> </pattern> </defs> </svg> <div id="host"></div> <script> // Should peek the pattern from the shadow root (green), not from the document (red), // even though the uri is absolute. host.attachShadow({ mode: "open" }).innerHTML = ` <svg width="100" height="100"> <defs> <pattern id="rect" width="100" height="100"> <rect fill="lime" width="100" height="100" /> </pattern> </defs> <rect fill="url(${location.href}#rect)" width="100" height="100" /> </svg> `; </script>