Two copies of the same SVG (which references an internal <linearGradient> by ID).
Each is rendered inside its own shadow root, so the IDs don't collide.
Toggle the first one's display and confirm the second keeps its gradient.
<linearGradient id="grad1"> and
a circle with fill="url(#grad1)". When the same SVG is injected twice into the light DOM,
both elements end up with an ID of grad1, and hiding one can cause the browser to lose
the reference for both. Wrapping each SVG in its own shadow root scopes the IDs, so each instance
resolves its own #grad1. Use the "Switch to Light DOM" button to see the bug reproduce.