CSS cannot select SVG <symbol> elements together with containing HTML classes
Categories
(Core :: SVG, defect)
Tracking
()
People
(Reporter: edemaine, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Steps to reproduce:
The CSS selector .yes .purple does not seem to correctly recognize elements with class="purple" nested inside elements with class="yes", when there is an SVG <symbol> element in between. Possibly related to this animation issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1354235
Here's a CodePen illustrating the issue.
Actual results:
The <rect> remains the default color, black.
Expected results:
The CSS should style the <rect> purple. (This is the Chrome behavior.)
|
||
Comment 1•2 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•2 years ago
|
||
I'm afraid you've found this Chrome bug. Firefox implementation is correct per https://www.w3.org/TR/SVG/struct.html#UseStyleInheritance
However, 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.
|
Reporter | |
Comment 3•2 years ago
|
||
Thank you! That isolation is inconvenient for my application, but good to know I actually need to work around it.
Description
•