'CSS ::part selector doesn't work for SVG in Chrome
I am currently building a web application that use SVG to display cameras.
Within the SVG, the base camera draw is defined in a defs tag, and real objects are then drawn using a use tag.
Since those cameras can have different characteristics (e.g. online/active/selected/…), I'd like to style them. However, use tag creates a closed shadow DOM, and therefore are inaccessible for standard CSS rule. I already use CSS variables successfully, but they present some limits.
I recently discovered the ::part selector which is exactly what I need: the object in defs exports some tags using a part attribute, and they are now accessible to CSS through ::part selector. Nice!
Except that only Firefox seems to support it for SVG. Chrome does not. Here is a test: https://codepen.io/glandos/pen/LYOPerb The result should output a green camera with a red and black outlined path. In Chrom(e|ium), attributes from defs are used, but not the CSS.
Two questions:
- I couldn't find any reported issue. Did I missed something? And since I don't have (and don't want) a Google account, I can't even report that to the Chromium team :'(
- Is there a workaround, apart from going on with CSS variables that cascade through shadow DOM?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|