CSS selectors match the shadow dom inside use element

RESOLVED DUPLICATE of bug 265894

Status

()

Core
SVG
RESOLVED DUPLICATE of bug 265894
2 years ago
2 years ago

People

(Reporter: Florens Verschelde, Unassigned)

Tracking

41 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
Created attachment 8647527 [details]
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.

Updated

2 years ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 265894
You need to log in before you can comment on or make changes to this bug.