1415186 - Styles not applied to targeted SVG elements when using `use`

Status: VERIFIED INVALID

(Core :: SVG, defect)

Description

[peter.mouland]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Steps to reproduce:

I setup a SVG, one using `symbol`, the other using `use`.
When attempting to apply styles to the elements within use (which exist via showDom i think because of the symbol), nothing happens

CodePen Demo:
Under  the heading `SVGs w/ multiple styles`:

https://codepen.io/peter-mouland/pen/JErvZY


Actual results:

no styles were applied - but this works in other popular browsers (not safari)


Expected results:

I expected (hoped is more like it) that that styles were applied as they were in Chrome and Edge etc

Comment 1

[Robert Longson [:longsonr]]

This is invalid per https://www.w3.org/TR/SVG2/struct.html#UseElement

> 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.

Comment 2

[peter.mouland]

I have simplified the code pen to demonstrate only this issue.

https://codepen.io/peter-mouland/pen/pdEMWZ/

Apologies, but I don't completely get the link you sent.  Are you saying that the selector `.blue--line-1 .line--1` is complex and therefore does not have to be applied?

As you can see the using the SVGs in this way works in other browsers (Chrome, ie11, edge, opera) but not within Firefox (or Safari).  Would this be enough to persuade the mozilla community to try and fix/add this feature?  I think it would be an asset if this was to work in all browsers.

Comment 3

[peter.mouland]

Sorry - I've moved this back to `unconfirmed` while I wait to see if the additional, more specific, details added prove to be useful in confirming if this really is a bug.

the Firefox version I tests this in is v56

Comment 4

[Robert Longson [:longsonr]]

Firefox is the only browser thus far to have implemented SVG 2 use elements. Other browsers implement them in the SVG 1.1 way. I imagine they will catch up at some point.