249080 2022-12-10 15:07:08 -0800 CSS selectors should not pierce the shadow root created by the SVG <use> element 2026-04-22 02:01:05 -0700 1 1 1 Unclassified WebKit SVG Safari Technology Preview Mac (Apple Silicon) macOS 12 RESOLVED DUPLICATE 179724 https://bugs.webkit.org/show_bug.cgi?id=303998 BrowserCompat, InRadar, LayerBasedSVGEngine P2 Normal --- 148695 1 jed webkit-unassigned ahmad.saleem792 arif.hossain.9213 karlcow rniwa sabouhallawa webkit-bug-importer zimmermann oldest_to_newest 1918220 0 463980 jed 2022-12-10 15:07:08 -0800 Created attachment 463980 svg-use-shadow-piercing-selector.svg I attempted to apply some CSS styles to SVG elements included via the <use> SVG element with a selector that includes elements both outside and inside the <use> shadow root. While this sort of style worked for me in both Chrome and Safari, I discovered that it does not work in Firefox. I first filed this bug against Firefox/Gecko but they clarified that FF matches the spec, while Chrome/Safari don’t. Specifically, > I'm afraid we're right and Chrome is wrong here. Per https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance > > ...if a CSS rule uses a complex selector to match an element based on its ancestors or siblings, and those ancestors or siblings are not cloned as part of the shadow tree, then that rule would no longer match the element instance. See the attached SVG for a demonstration of this behavior. The SVG contains an inline <style> rule `svg rect { fill: red; }`, and, inside a <defs>, a <rect> with `fill="green"`. The <rect> is then included via a <use> tag into the visible image. On Firefox, the `fill: red` rule is not applied, so the <rect> remains green. On Chrome and Safari, the rule is applied, changing the <rect> to be red. Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1805048 Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=785246 possibly related: bug 78902 1918222 1 jed 2022-12-10 15:14:50 -0800 Tested on macOS 12.6.1 (21G217). fails: Safari Technology Preview Release 159 (Safari 16.4, WebKit 17615.1.12.130.1) WebKit 257686 Safari Version 16.1 (17614.2.9.1.13, 17614) Chrome Version 108.0.5359.98 (Official Build) (arm64) passes: Firefox 107.0.1 (64-bit) 1920287 2 webkit-bug-importer 2022-12-17 15:08:16 -0800 <rdar://problem/103484715> 2046310 3 longsonr 2024-07-15 12:14:13 -0700 Are there any plans to fix this because we keep getting Firefox bugs that we keep resolving as invalid. We agreed this behaviour because it was supposed to be simple to implement given the rules on shadow trees and the desire to implement use using that technology. 2157794 4 karlcow 2025-11-10 17:16:18 -0800 Pull request: https://github.com/WebKit/WebKit/pull/53713 2159156 5 karlcow 2025-11-16 18:37:07 -0800 So my first PR is too simplistic. It totally ignores the external style. This is not really the full issue. A summary: The use element create a shadow tree which has for root elements the first element targeted in the defs by the use element. So the goal of the patch would be to make sure that the styles defined outside match in the context of the shadow tree. 2159186 6 karlcow 2025-11-16 21:49:34 -0800 This also fails https://wpt.fyi/results/svg/linking/reftests/use-descendant-combinator-003.html?label=experimental&label=master&aligned 2165365 7 karlcow 2025-12-12 02:17:41 -0800 *** Bug 303998 has been marked as a duplicate of this bug. *** 2190877 8 karlcow 2026-03-16 23:32:03 -0700 I closed my PR. I was not confident enough it was the right way. If someone else wants to give it a try. 2190879 9 karlcow 2026-03-16 23:33:58 -0700 Some of the issues encountered when trying to fix this. Solving the use inheritance is not the hardest part. The hardest part is probably dealing with the failures around symbols, defs, and animation code related cascading from the fix. 2203104 10 karlcow 2026-04-22 01:49:23 -0700 This looks like a duplicate of Bug 179724 2203110 11 karlcow 2026-04-22 02:00:36 -0700 *** This bug has been marked as a duplicate of bug 179724 *** 463980 2022-12-10 15:07:08 -0800 2022-12-10 15:07:08 -0800 svg-use-shadow-piercing-selector.svg svg-use-shadow-piercing-selector.svg image/svg+xml 224 jed PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHJl Y3QgaWQ9InJlY3QiIHg9IjEwIiB5PSIxMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9 ImdyZWVuIiAvPgogIDwvZGVmcz4KICA8dXNlIGhyZWY9IiNyZWN0IiAvPgogIDxzdHlsZT4KICAg IHN2ZyByZWN0IHsKICAgICAgZmlsbDogcmVkOwogICAgfQogIDwvc3R5bGU+Cjwvc3ZnPgo=