1194246 - CSS selectors match the shadow dom inside use element

Status: RESOLVED DUPLICATE of bug 265894

(Core :: SVG, defect)

Description

[Florens Verschelde :fvsch]

Attachment: svg-use-deep-selection.html

When using <svg><use xlink:href="url"></use></svg>, Firefox generates a shadow-y dom that seems to look like:

<svg>
  <use>
    <svg>
      <!-- shapes etc. -->
    </svg>
  </use>
<svg>

and it also matches CSS selectors with this shadow-y dom. This can create bugs in author code, for instance:

.footer svg { fill: gray; }
.footer svg.something { fill: black; } /* will still look white! */

See the attached test case for live examples.

Other browsers don't have this issue.