CSS selectors do not pierce the shadow root created by the SVG <use> element
Categories
(Core :: SVG, defect)
Tracking
()
People
(Reporter: jed, Unassigned)
Details
Attachments
(1 file)
|
234 bytes,
image/svg+xml
|
Details |
svg-use-custom-properties.svg
Steps to reproduce:
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. The minimal example attached demonstrates this with the selector svg rect, but the same issue applies to my real use case where I was selecting an element inside of the SVG and then using the space combinator to descend into the <use> to an element I wanted to target there.
Actual results:
The rect element included inside of the <use> doesn’t get the CSS rule applied to it in Firefox. If you open the SVG, you’ll find that the left square is green, and the right square (which is a copy of the left square using <use>) is red.
Firefox: 107.0.1 (64-bit)
macOS: 12.6.1 (21G217)
Expected results:
On Chrome (108.0.5359.98 (Official Build) (arm64)) and Safari (Technology Preview Release 159 (Safari 16.4, WebKit 17615.1.12.130.1)), both squares show up in green as I expected.
Note that changing the CSS rule from svg rect { to rect { results in the correct behavior in all 3 browsers.
|
||
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•3 years ago
|
||
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.
|
|
||
Comment 3•3 years ago
|
||
The Chrome bug is https://bugs.chromium.org/p/chromium/issues/detail?id=785246
Description
•