ID encapsulation is broken with fragment identifiers in SVGs within a shadowRoot

• Component: SVG
• Status: RESOLVED CONFIGURATION CHANGED

[Elliot Nahman]

SVGs can use fragment identifies to link various assets such as patterns, clipPaths, etc to SVG elements. When the SVG lives within a shadowRoot, the IDs of these assets should be encapsulated and just have to be unique within their respective shadow DOM.

However, I believe starting in Safari 15, this is no longer the case. Now if the same ID is used in multiple different shadow DOMs, all the references to the fragment point to the last instance put on the page. If that instance is removed from the page, then no fragment will be applied.


See https://codepen.io/nonmetalhail/pen/PoOOZaL for an example of the bug. 
In the example, you start off with two webcomponents, each with an SVG in their shadowRoots. Each SVG displays a pattern. On first render, the patterns are correct for each SVG. However, when the first SVG is re-rendered, it erroneously adopts the pattern of the second SVG. If the pattern from the second SVG is deleted (in the example the whole WC is removed), and the first re-rendered again, it is does not display any pattern even though its own pattern is still present in the its DOM.

[Radar WebKit Bug Importer]

<rdar://problem/89040063>

[Ahmad Saleem]

I am not able to reproduce this bug in Safari 16.4.1 and WebKit ToT and it behaves similar to Chrome Canary 115.

Doing 'Re-render' on first without removing second.

--> Safari does not copy design of below element of straight stripes

Deleting second element and then 're-render':

---> Safari does not switch to straight stripe or does not render at all. It still shifts the horizontal stripes slightly similar to Chrome.

Marking this as "RESOLVED CONFIGURATION CHANGED".